-1👍
✅
What you want to do is use Array.find() to find the matching ups thingy, and get it’s name. 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: {}
})
0👍
I do not know why you have the same key for both json, i’m going to assume the first one as usp1 and the second one as usp2.
In the html, you could do
<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>
Source:stackexchange.com