首先,感谢使这一职位变得不稳定的评论。
我来自阿根廷,显然我的英语还不够好。
我正在接受初级开发人员的培训,我的任务是在政党参议员中通过三个复选框按方过滤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数组:
`
var数据=
{
“状态”:“确定”,
“ copyright”:“版权所有(c)2019 Pro Publica Inc.保留所有权利。”,
“结果”:[
{
“ congress”:“ 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/