Specifiek object retourneren van JSON-tekenreeks?

Maak een script met jQuery op een ASP.NET-pagina. Heb een JSON-reeks die er als volgt uitziet:

<input id="hfImages" type="hidden" value="[
{"ProductID": "000001",
 "Small": "http://myimages.com/images/I/75.jpg",
 "Medium": "http://myimages.com/images/I/160.jpg",
 "Large": "http://myimages.com/images/I/320.jpg",
 "Thumb": "http://myimages.com/images/I/30.jpg"},

{"ProductID": "000002",
 "Small": "http://myimages.com/images/I/75ab.jpg",
 "Medium": "http://myimages.com/images/I/160j.jpg",
 "Large": "http://myimages.com/images/I/320y.jpg",
 "Thumb": "http://myimages.com/images/I/30ii.jpg"},

{"ProductID": "000003",
 "Small": "http://myimages.com/images/I/75.jpg",
 "Medium": "http://myimages.com/images/I/160.jpg",
 "Large": "http://myimages.com/images/I/320.jpg",
 "Thumb": "http://myimages.com/images/I/30.jpg"}
]"/>

Ik maak een object uit deze string:

var images = $.parseJSON($("#[id*='hfImages']").val());

Heb een var genaamd ProductID die de waarde van de "ProductID" bevat die ik van deze JSON-string moet krijgen, maar ik weet niet hoe dit moet. Uiteindelijk (als ik eenmaal de juiste gegevens uit deze reeks heb gevonden), zou ik zoiets als dit kunnen doen:

$("#productImages img.small").src(image[0].Small)
$("#productImages img.medium").src(image[0].Medium)
$("#productImages img.large").src(image[0].Large)
$("#productImages img.thumb").src(image[0].Thumb)

Ik heb voorbeelden gezien die door het JSON-object lopen totdat het de gewenste 'sleutel' vindt, maar ik denk dat dit op een eenvoudigere manier gebeurt met .filter of .map ?

Ben erg nieuw voor Javascript/JQuery en JSON. Lijkt alsof ik een -sleutel heb die "ProductID" wordt genoemd, maar alles wat ik lees, verwijst niet naar een enkele sleutel. Alsof elke Naam in de Naam/Waarde als een sleutel wordt beschouwd.

Mijn probleem om een ​​goed voorbeeld te vinden van hoe dit te doen, heeft waarschijnlijk te maken met het feit dat ik de juiste terminologie niet ken voor alles wat hier te maken heeft.

Kan iemand me een voorbeeld in jQuery laten zien van hoe een object van de bovenstaande JSON te krijgen, gezien het feit dat de gewenste ProductID is opgeslagen als een tekenreeks in var ProductId? (var ProductID = "000002";)

Ik zou ook alle links naar goede referenties op JSON en jQuery op prijs stellen. Ik ben bij json.org en verschillende anderen geweest, maar ze zijn niet erg behulpzaam op mijn kennisniveau. : S

3
Vergeet niet om die JSON in het html-kenmerk te hullen
toegevoegd de auteur Bergi, de bron

1 antwoord

Als u het overeenkomstige element met het opgegeven product-ID wilt vinden, kunt u de .grep() gebruiken functie.

Zoals dit:

var productID = '000002';
var images = $.parseJSON($("#[id*='hfImages']").val());
var filteredImages = $.grep(images, function() {
    return this.ProductID == productID;
});

if (filteredImages.length > 0) {
   //at least one element inside the images array matched the filter criteria
    var product = filteredImages[0];

   //you could use product.Small, product.Medium, ... here
}
3
toegevoegd
Maar ik wil niet verwijzen naar de array op index. Ik moet het element retourneren waar "ProductID" = Product-ID is. Is er geen methode die een object uit een array van objecten retourneert waarbij een eigenschap gelijk is aan een specifieke waarde? Misschien heb ik mijn vraag niet duidelijk geformuleerd. Mijn excuses.
toegevoegd de auteur rwkiii, de bron
Dit is wat ik moest doen. Doet .filter of .map niet iets als .grep? Ik vraag het omdat een ander deel van mijn script .filter en .map gebruikt om een ​​specifiek element te vinden dat overeenkomt met verschillende criteria. Ik begrijp niet echt hoe het werkt.
toegevoegd de auteur rwkiii, de bron
Darin, het lijkt niet te werken. Ik heb mijn code vele malen gecontroleerd en het is net zoals je hierboven hebt geschreven. Ik zie dat var images 9 elementen bevat en dat het ook een element bevat met ProductID matching productID. Maar gefilterde afbeeldingen hebben altijd een lengte van 0 nadat de $. Grep is voltooid.
toegevoegd de auteur rwkiii, de bron
Ik denk dat ik zie waarom dit niet werkt, maar niet zeker weet hoe het te repareren. dit verwijst naar mijn venster in plaats van de afbeeldingen var. Het bevat geen .ProductID-eigenschap. Weet iemand hoe dit op te lossen of wat ik verkeerd zou kunnen doen? Ik heb de code die Darin verstrekt identiek gebruikt.
toegevoegd de auteur rwkiii, de bron
Kan het verwachte resultaat krijgen na het wijzigen van de .grep-aanroep in $. Grep (images, function (n) {return n.ProductID == productID;}) hoewel ik vermoed dat dit is rechts...
toegevoegd de auteur rwkiii, de bron
Ja, deze methode wordt .grep() genoemd. Zie mijn bijgewerkte antwoord.
toegevoegd de auteur Darin Dimitrov, de bron
@rwkiii - Het lijkt veel op $. filter() , er is alleen een array (of object?) nodig en je kunt er doorheen stappen en check zijn verschillende eigenschappen en attributen of wat dan ook tegen degene die je zoekt, het retourneren van een nieuwe array alleen met de interne controle retourneert waar. Het is alsof u een array of object reduceert tot alleen de onderdelen die overeenkomen, maar u krijgt uiteindelijk een kopie in plaats van dat dezelfde array wordt gewijzigd/afgekapt.
toegevoegd de auteur Jared Farrish, de bron