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

时间：2018-07-04 08:21:02

标签： javascript html arrays json vue.js

我有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具有对应的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>

非常感谢

2 个答案:

答案 0 :(得分：0)

我不知道您为什么两个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>

答案 1 :(得分：-1)

您要做的是使用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>

JS 

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: {}
})
相关问题
最新问题