如何遍历一个json的值，但只显示另一个json中具有指定id的值答案

【问题标题】：how to loop through one json's value but only show the ones with a specified id from another json如何遍历一个json的值，但只显示另一个json中具有指定id的值
【发布时间】：2018-12-12 14:51:22
【问题描述】：

我有 2 个 json 文件，其中一个包含所有图标的值：

"usp": [
    {
        "func_id": "0",
        "func_title": "19 Bar druk",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_pressure.svg",
        "func_desc": "Alle Nespresso machines zijn uitgerust met een hogedrukpomp van 19 bar om de 900 verschillende koffiearoma's vrij te laten komen."
  },
    {
        "func_id": "1",
        "func_title": "Retro design",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_retro.svg",
        "func_desc": "Een krachtige uitstraling, geïnspireerd door de stedelijke jaren '30."
  },
    {
        "func_id": "2",
        "func_title": "2 kopgroottes",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_cupsize.svg",
        "func_desc": "Elke Grand Cru is ontwikkeld voor een bepaalde kopgrootte, om zo een optimale smaak en samenstelling te bieden. Deze machine creëert eenvoudig uw ultieme espresso of lungo. Deze kopgroottes kunt u eventueel wijzigen naar uw favoriete kopgrootte."
  },
    {
        "func_id": "3",
        "func_title": "Compact design",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_compactdesign.svg",
        "func_desc": "Deze compacte machine past in iedere keuken."
  },
    {
        "func_id": "4",
        "func_title": "Snel opgewarmd",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_temperature.svg",
        "func_desc": "Snel klaar voor gebruik: het verwarmingssysteem bereikt binnen 25 seconden de juiste temperatuur."
  },
    {
        "func_id": "5",
        "func_title": "De Aeroccino melkopschuimer",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_aero.svg",
        "func_desc": "Met de Aeroccino melkopschuimer maakt u binnen enkele seconden romig en zacht melkschuim. Voor al uw warme en koude melkrecepten."
  },
    {
        "func_id": "6",
        "func_title": "Breed scala aan beschikbare kleuren",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_machinecolor.svg",
        "func_desc": "In deze machine lijn zijn extra veel kleuren beschikbaar. Zo is er een combinatie mogelijk met ieder interieur."
  },
    {
        "func_id": "7",
        "func_title": "Iconisch design",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_icon.svg",
        "func_desc": "Misschien wel de meest herkenbare Nespresso machine."
  },
    {
        "func_id": "8",
        "func_title": "Verwisselbare zijpanelen",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_clips.svg",
        "func_desc": "Pas uw machine aan aan uw stijl en de laatste trends. Deze machine wordt geleverd met een extra set zijpanelen."
  },
    {
        "func_id": "9",
        "func_title": "3 kopgroottes",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_grandscrussizes.svg",
        "func_desc": "Elke Grand Cru is ontwikkeld voor een bepaalde kopgrootte, om zo een optimale smaak en samenstelling te bieden. Deze machine creëert eenvoudig uw ultieme Ristretto, Espresso of Lungo Grand Cru."
  },
    {
        "func_id": "10",
        "func_title": "Onthoudt uw favoriete kopgrootte",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_voorkeur.svg",
        "func_desc": "Bij het sluiten van de schuifklep zet deze machine automatisch uw meest gebruikte kopgrootte."
  },
    {
        "func_id": "11",
        "func_title": "Koppeling met smartphone en tablet",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_bluetooth.svg",
        "func_desc": "Deze machine werkt samen met uw smartphone of tablet. U bereidt uw koffie, controleert de capsule voorraad en ontvangt onderhoudsmeldingen doormiddel van de Nespresso app."
  },
    {
        "func_id": "12",
        "func_title": "Flexibel in kopgrootte",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_pres.svg",
        "func_desc": "Personaliseer uw koffie naar uw smaak met 6 voorgeprogrammeerde kopgroottes."
  },
    {
        "func_id": "13",
        "func_title": "Energie besparend",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_energy.svg",
        "func_desc": "De machine schakelt zichzelf automatisch uit na 9 minuten."
  },
    {
        "func_id": "14",
        "func_title": "Geïntegreerde melkfunctie",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_melkfunction.svg",
        "func_desc": "Met de geïntegreerde melkfunctie bereidt u keer op keer uw favoriete melkrecept met heerlijk romig en zacht melkschuim."
  },
    {
        "func_id": "15",
        "func_title": "Touch Screen",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_touch.svg",
        "func_desc": "Intuïtief touchscreen voor eenvoudige bediening."
  },
    {
        "func_id": "16",
        "func_title": "Eenvoudig onderhoud",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_autoclean.svg",
        "func_desc": "Het zelfreinigende systeem zorgt ervoor dat de melkcontainer met één druk op de knop wordt schoongemaakt."
  },
    {
        "func_id": "17",
        "func_title": "Temperatuur instellen",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_temp.svg",
        "func_desc": "Uw koffie op de perfecte temperatuur: warm, heet of extra heet."
  },
    {
        "func_id": "18",
        "func_title": "Heet water functie",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_water.svg",
        "func_desc": "Een speciale uitloop voor heet water."
  },
    {
        "func_id": "19",
        "func_title": "Melkrecepten met één druk op de knop",
        "func_icon": "https://s3.eu-central-1.amazonaws.com/dev-nes-b2c-887b-machinesplashpage/img/icons/usp_melkreceptenmet1druk.svg",
        "func_desc": ""
  },
    {
        "func_id": "20",
        "func_title": "Programmeerbare kopgrootes",
        "func_icon": "https://s3.eu-central-1.amazonaws.com/dev-nes-b2c-887b-machinesplashpage/img/icons/usp_automatischekopgroottes.svg",
        "func_desc": ""
  },
    {
        "func_id": "21",
        "func_title": "Energie bespaarstand",
        "func_icon": "https://s3.eu-central-1.amazonaws.com/dev-nes-b2c-887b-machinesplashpage/img/icons/usp_energiebesparend.svg",
        "func_desc": ""
  }

还有一个专门用于机器。特定的 id 与它应该显示的图标相对应：

  "usp": [
           "0",
           "14",
           "16",
           "4",
           "3"
        ],

现在它只是将所有可用的图标加载到我的元素中。如何让它只显示需要显示的图标？在此示例中，ID 为：0、14、16、4 和 3。

这是我的html：

 <div class="discover__specs">
    <ul class="discover__specs__list">
      <li v-for="(usp, index) in main.usp" :key="index">
        <img v-bind:src="usp.func_icon" alt="">
        <p>{{ main.usp.func_title }}</p>
      </li>
    </ul>
  </div>

非常感谢

【问题讨论】：

first.filter(el => second.contains(el.func_id))

标签： javascript html arrays json vue.js

【解决方案1】：

我不知道为什么两个 json 的密钥相同，我假设第一个为 usp1，第二个为 usp2。

在html中，你可以这样做

<div class="discover__specs">
    <ul class="discover__specs__list">
      <li v-for="(usp2, index) in main.usp" :key="index">
        <img v-bind:src="usp2.func_icon[usp2[index]]" alt="">
        <p>{{ main.usp.func_title }}</p>
      </li>
    </ul>
  </div>

【讨论】：

【解决方案2】：

您要做的是使用Array.find() 找到匹配的ups 事物，并获得它的名称。 https://jsfiddle.net/eywraw8t/136517/

HTML

<div id="app">
  <div class="discover__specs">
    <ul class="discover__specs__list">
      <li v-for="(uspID, index) in uspIDs" :key="index">
        <img v-bind:src="usp.find(uspObj => uspObj.func_id === uspID).func_icon" alt="">
        <p>
          {{ usp.find(uspObj => uspObj.func_id === uspID).func_title }}
        </p>
      </li>
    </ul>
  </div> 
</div>

new Vue({
  el: "#app",
  data: {
    uspIDs: [
      "0",
      "14",
      "16",
      "4",
      "3"
    ],
    usp: [
    {
        "func_id": "0",
        "func_title": "19 Bar druk",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_pressure.svg",
        "func_desc": "Alle Nespresso machines zijn uitgerust met een hogedrukpomp van 19 bar om de 900 verschillende koffiearoma's vrij te laten komen."
  },
    {
        "func_id": "1",
        "func_title": "Retro design",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_retro.svg",
        "func_desc": "Een krachtige uitstraling, geïnspireerd door de stedelijke jaren '30."
  },
    {
        "func_id": "2",
        "func_title": "2 kopgroottes",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_cupsize.svg",
        "func_desc": "Elke Grand Cru is ontwikkeld voor een bepaalde kopgrootte, om zo een optimale smaak en samenstelling te bieden. Deze machine creëert eenvoudig uw ultieme espresso of lungo. Deze kopgroottes kunt u eventueel wijzigen naar uw favoriete kopgrootte."
  },
    {
        "func_id": "3",
        "func_title": "Compact design",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_compactdesign.svg",
        "func_desc": "Deze compacte machine past in iedere keuken."
  },
    {
        "func_id": "4",
        "func_title": "Snel opgewarmd",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_temperature.svg",
        "func_desc": "Snel klaar voor gebruik: het verwarmingssysteem bereikt binnen 25 seconden de juiste temperatuur."
  },
    {
        "func_id": "5",
        "func_title": "De Aeroccino melkopschuimer",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_aero.svg",
        "func_desc": "Met de Aeroccino melkopschuimer maakt u binnen enkele seconden romig en zacht melkschuim. Voor al uw warme en koude melkrecepten."
  },
    {
        "func_id": "6",
        "func_title": "Breed scala aan beschikbare kleuren",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_machinecolor.svg",
        "func_desc": "In deze machine lijn zijn extra veel kleuren beschikbaar. Zo is er een combinatie mogelijk met ieder interieur."
  },
    {
        "func_id": "7",
        "func_title": "Iconisch design",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_icon.svg",
        "func_desc": "Misschien wel de meest herkenbare Nespresso machine."
  },
    {
        "func_id": "8",
        "func_title": "Verwisselbare zijpanelen",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_clips.svg",
        "func_desc": "Pas uw machine aan aan uw stijl en de laatste trends. Deze machine wordt geleverd met een extra set zijpanelen."
  },
    {
        "func_id": "9",
        "func_title": "3 kopgroottes",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_grandscrussizes.svg",
        "func_desc": "Elke Grand Cru is ontwikkeld voor een bepaalde kopgrootte, om zo een optimale smaak en samenstelling te bieden. Deze machine creëert eenvoudig uw ultieme Ristretto, Espresso of Lungo Grand Cru."
  },
    {
        "func_id": "10",
        "func_title": "Onthoudt uw favoriete kopgrootte",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_voorkeur.svg",
        "func_desc": "Bij het sluiten van de schuifklep zet deze machine automatisch uw meest gebruikte kopgrootte."
  },
    {
        "func_id": "11",
        "func_title": "Koppeling met smartphone en tablet",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_bluetooth.svg",
        "func_desc": "Deze machine werkt samen met uw smartphone of tablet. U bereidt uw koffie, controleert de capsule voorraad en ontvangt onderhoudsmeldingen doormiddel van de Nespresso app."
  },
    {
        "func_id": "12",
        "func_title": "Flexibel in kopgrootte",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_pres.svg",
        "func_desc": "Personaliseer uw koffie naar uw smaak met 6 voorgeprogrammeerde kopgroottes."
  },
    {
        "func_id": "13",
        "func_title": "Energie besparend",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_energy.svg",
        "func_desc": "De machine schakelt zichzelf automatisch uit na 9 minuten."
  },
    {
        "func_id": "14",
        "func_title": "Geïntegreerde melkfunctie",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_melkfunction.svg",
        "func_desc": "Met de geïntegreerde melkfunctie bereidt u keer op keer uw favoriete melkrecept met heerlijk romig en zacht melkschuim."
  },
    {
        "func_id": "15",
        "func_title": "Touch Screen",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_touch.svg",
        "func_desc": "Intuïtief touchscreen voor eenvoudige bediening."
  },
    {
        "func_id": "16",
        "func_title": "Eenvoudig onderhoud",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_autoclean.svg",
        "func_desc": "Het zelfreinigende systeem zorgt ervoor dat de melkcontainer met één druk op de knop wordt schoongemaakt."
  },
    {
        "func_id": "17",
        "func_title": "Temperatuur instellen",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_temp.svg",
        "func_desc": "Uw koffie op de perfecte temperatuur: warm, heet of extra heet."
  },
    {
        "func_id": "18",
        "func_title": "Heet water functie",
        "func_icon": "https://www.nespresso.com/shared_res/mos/free_html/nl/machinesplashv2/img/usp_water.svg",
        "func_desc": "Een speciale uitloop voor heet water."
  },
    {
        "func_id": "19",
        "func_title": "Melkrecepten met één druk op de knop",
        "func_icon": "https://s3.eu-central-1.amazonaws.com/dev-nes-b2c-887b-machinesplashpage/img/icons/usp_melkreceptenmet1druk.svg",
        "func_desc": ""
  },
    {
        "func_id": "20",
        "func_title": "Programmeerbare kopgrootes",
        "func_icon": "https://s3.eu-central-1.amazonaws.com/dev-nes-b2c-887b-machinesplashpage/img/icons/usp_automatischekopgroottes.svg",
        "func_desc": ""
  },
    {
        "func_id": "21",
        "func_title": "Energie bespaarstand",
        "func_icon": "https://s3.eu-central-1.amazonaws.com/dev-nes-b2c-887b-machinesplashpage/img/icons/usp_energiebesparend.svg",
        "func_desc": ""
  }

    ]
  },
  methods: {}
})

【讨论】：

我唯一忘记提及的是每台机器的 id 都不同。所以它必须是动态的，它循环通过与机器对应的 ID。谢谢！
这对我有用，非常感谢！该项目的问题是我没有太多的数据访问权限，因此很难更改 JSON。无论如何，谢谢！
我建议您将过滤包装到 computed 属性中：vuejs.org/v2/guide/computed.html