首先,感谢使这一职位变得不稳定的评论。
我来自阿根廷,显然我的英语还不够好。

我正在接受初级开发人员的培训,我的任务是在政党参议员中通过三个复选框按方过滤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/

10-09 22:06