Return specific object from JSON string?

Question

Am creating a script using JQuery on an ASP.NET page. Have a JSON string that looks like this:

<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"}
]"/>

I create an object from this string:

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

Have a var called ProductID that contains the value of the "ProductID" I need to get from this JSON string, but I don't know how to do it. Eventually (once I've retrieved the right data from this string), I'd want to be able to do something like this:

$("#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)

I've seen examples that loop through the JSON object until it finds the desired 'key', but I'm thinking there is a simpler way of doing this with .filter or .map?

Am very new to Javascript/JQuery and JSON. Seems like I have a key called "ProductID", but everything I'm reading doesn't refer to a single key. As though, every Name in the Name/Value is considered a key.

My problem finding a good example of how to do this probably has to do with my not knowing the right terminologies for everything involved here.

Can someone show me an example in JQuery of how to get an object from the above JSON, given that the desired ProductID is stored as a string in var ProductId? (var ProductID = "000002";)

I would also appreciate any links to good references on JSON and JQuery. I've been to json.org and several others, but they're not very helpful at my level of knowledge. :S

Don't forget to htmlescape that JSON in the html attribute

Bergi
– Bergi

2012-06-23 23:09:29 +00:00
Commented Jun 23, 2012 at 23:09 — Bergi
– Bergi, Commented Jun 23, 2012 at 23:09

Darin Dimitrov · Accepted Answer · 2012-06-23 21:26:11Z

3

If you want to find the corresponding element with the given product id you could use the .grep() function.

Like this:

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
}

answered Jun 23, 2012 at 21:26

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

rwkiii Over a year ago

But, I don't want to reference the array by index. I need to return the element where "ProductID" = ProductID. Isn't there a method that will return an object from an array of objects where a property is equal to a specific value? Maybe I didn't word my question clearly. I'm sorry.

rwkiii Over a year ago

This is what I needed to do. Doesn't .filter or .map do something like .grep? Am asking because another part of my script uses .filter and .map to find a specific element that matches on several criteria. I don't really understand how it works.

Jared Farrish Over a year ago

@rwkiii - It's a lot like $.filter(), only it takes an array (or object?) and allows you to step through it and check it's different properties and attributes or whatever against the one you're looking for, returning a new array only with the internal check returns true. It's like you're reducing an array or object to only the parts that match, but you end up with a copy instead of the same array being altered/truncated.

rwkiii Over a year ago

Darin, it doesn't seem to be working. I've checked my code many times and it is just like you wrote above. I can see that var images does contain 9 elements and that it also contains an element with ProductID matching productID. But, filteredImages always has a length of 0 after the $.grep completes.

rwkiii Over a year ago

I think I see why this isn't working, but not sure how to fix it. this is refering to my Window instead of the images var. It doesn't contain a .ProductID property. Does anyone know how to resolve this or what I might be doing wrong? I used the code Darin provided identically.

|

Collectives™ on Stack Overflow

Return specific object from JSON string?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related