首先感谢您的评论，使帖子变得不稳定。 我来自阿根廷，显然我的英语不够好。
我正在接受初级开发人员的培训，我的任务是使用三个复选框按政党过滤政府参议员内的 json 数组。 目前我的 HTML 代码带有复选框，它们具有 onchange 属性，然后在我的 javascript 代码中使用
Array.from(document.querySelectorAll('input[name=party]:checked')).map(elt => elt.value)
获取带有复选框值的数组，但我不知道如何将复选框值与json数组进行比较来过滤我需要的内容。
现在我们已经得到了代码
HTML:
<div class='row'>
<b>Filter by Party:</b>
<label for='Republican'>Republican</label>
<input onchange="partyFilter" type='checkbox' name='party' id='Republican' value='R'>
<label for='Democrat'>Democrat</label>
<input onchange="partyFilter" type='checkbox' name='party' id='Democrat' value='D'>
<label for='Independent'>Independent</label>
<input onchange="partyFilter" type='checkbox' name='party' id='Independent' value='I'>
</div>
JAVASCRIPT(获取复选框值)
Array.from(document.querySelectorAll('input[name=party]:checked')).map(elt => elt.value)
JAVASCRIPT(过滤我的数组以获取“party”值
miembros.filter(rep => rep.party === 'R')
miembros.filter(dem => rep.party === 'D')
miembros.filter(ind => rep.party === 'I')
我以为你不需要 json 代码，但我错了。 以下是其中包含数组的 json 代码示例。
JSON 数组:
` 变量数据 = { “状态”:“确定”， "copyright":"版权所有 (c) 2019 Pro Publica Inc. 保留所有权利。", “结果”:[ { “国会”:“116”， "chamber": "参议院",
"num_results": 100,
"offset": 0,
"members": [
{
"id": "A000360",
"title": "Senator, 2nd Class",
"short_title": "Sen.",
"api_uri":"https://api.propublica.org/congress/v1/members/A000360.json",
"first_name": "Lamar",
"middle_name": null,
"last_name": "Alexander",
"suffix": null,
"date_of_birth": "1940-07-03",
"gender": "M",
"party": "R",
"leadership_role": null,
"twitter_account": "SenAlexander",
"facebook_account": "senatorlamaralexander",
"youtube_account": "lamaralexander",
"govtrack_id": "300002",
"cspan_id": "5",
"votesmart_id": "15691",
"icpsr_id": "40304",
"crp_id": "N00009888",
"google_entity_id": "/m/01rbs3",
"fec_candidate_id": "S2TN00058",
"url": "https://www.alexander.senate.gov/public",
"rss_url": "https://www.alexander.senate.gov/public/?a=RSS.Feed",
"contact_form": "http://www.alexander.senate.gov/public/index.cfm?p=Email",
"in_office": true,
"cook_pvi": null,
"dw_nominate": 0.324,
"ideal_point": null,
"seniority": "17",
"next_election": "2020",
"total_votes": 386,
"missed_votes": 76,
"total_present": 0,
"last_updated": "2019-12-10 06:56:21 -0500",
"ocd_id": "ocd-division/country:us/state:tn",
"office": "455 Dirksen Senate Office Building",
"phone": "202-224-4944",
"fax": "202-228-3398",
"state": "TN",
"senate_class": "2",
"state_rank": "senior",
"lis_id": "S289"
,"missed_votes_pct": 19.69,
"votes_with_party_pct": 97.09,
"votes_against_party_pct": 2.91
},
{
"id": "B001230",
"title": "Senator, 1st Class",
"short_title": "Sen.",
"api_uri":"https://api.propublica.org/congress/v1/members/B001230.json",
"first_name": "Tammy",
"middle_name": null,
"last_name": "Baldwin",
"suffix": null,
"date_of_birth": "1962-02-11",
"gender": "F",
"party": "D",
"leadership_role": null,
"twitter_account": "SenatorBaldwin",
"facebook_account": "senatortammybaldwin",
"youtube_account": "witammybaldwin",
"govtrack_id": "400013",
"cspan_id": "57884",
"votesmart_id": "3470",
"icpsr_id": "29940",
"crp_id": "N00004367",
"google_entity_id": "/m/024v02",
"fec_candidate_id": "H8WI00018",
"url": "https://www.baldwin.senate.gov",
"rss_url": "https://www.baldwin.senate.gov/rss/feeds/?type=all",
"contact_form": "https://www.baldwin.senate.gov/feedback",
"in_office": true,
"cook_pvi": null,
"dw_nominate": -0.502,
"ideal_point": null,
"seniority": "7",
"next_election": "2024",
"total_votes": 386,
"missed_votes": 1,
"total_present": 1,
"last_updated": "2019-12-10 06:56:22 -0500",
"ocd_id": "ocd-division/country:us/state:wi",
"office": "709 Hart Senate Office Building",
"phone": "202-224-5653",
"fax": null,
"state": "WI",
"senate_class": "1",
"state_rank": "junior",
"lis_id": "S354"
,"missed_votes_pct": 0.26,
"votes_with_party_pct": 93.83,
"votes_against_party_pct": 6.17
},
{
"id": "B001261",
"title": "Senator, 1st Class",
"short_title": "Sen.",
"api_uri":"https://api.propublica.org/congress/v1/members/B001261.json",
"first_name": "John",
"middle_name": null,
"last_name": "Barrasso",
"suffix": null,
"date_of_birth": "1952-07-21",
"gender": "M",
"party": "R",
"leadership_role": "Senate Republican Conference Chair",
"twitter_account": "SenJohnBarrasso",
"facebook_account": "johnbarrasso",
"youtube_account": "barrassowyo",
"govtrack_id": "412251",
"cspan_id": "1024777",
"votesmart_id": "52662",
"icpsr_id": "40707",
"crp_id": "N00006236",
"google_entity_id": "/m/02rsm32",
"fec_candidate_id": "S6WY00068",
"url": "https://www.barrasso.senate.gov",
"rss_url": "https://www.barrasso.senate.gov/public/?a=rss.feed",
"contact_form": "https://www.barrasso.senate.gov/public/index.cfm/contact-form",
"in_office": true,
"cook_pvi": null,
"dw_nominate": 0.538,
"ideal_point": null,
"seniority": "13",
"next_election": "2024",
"total_votes": 386,
"missed_votes": 0,
"total_present": 0,
"last_updated": "2019-12-09 19:32:09 -0500",
"ocd_id": "ocd-division/country:us/state:wy",
"office": "307 Dirksen Senate Office Building",
"phone": "202-224-6441",
"fax": null,
"state": "WY",
"senate_class": "1",
"state_rank": "junior",
"lis_id": "S317"
,"missed_votes_pct": 0.00,
"votes_with_party_pct": 96.88,
"votes_against_party_pct": 3.13
},`
我不知道如何连接 mi javascript 函数接收到的值来过滤数组。
最佳答案
您可以在过滤器中使用检查值数组，如下所示:
const checked = Array.from(document.querySelectorAll('input[name=party]:checked')).map(elt => elt.value)
miembros.filter(rep => checked.includes(rep.party))
这将返回一个仅包含 miembros 数组中对象的数组，这些对象的 party 属性与检查的值之一匹配。
关于javascript - 从数组中收集数据并使用复选框进行过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59392626/