从JSON字符串返回特定对象?

时间:2012-06-23 21:22:30

标签: jquery json

在ASP.NET页面上使用JQuery创建脚本。有一个看起来像这样的JSON字符串:

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

我从这个字符串创建一个对象:

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

有一个名为ProductID的var,它包含我需要从这个JSON字符串中获取的“ProductID”的值,但我不知道该怎么做。最终(一旦我从这个字符串中检索到正确的数据),我希望能够做到这样的事情:

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

我已经看到循环遍历JSON对象的示例,直到找到所需的“密钥”,但我认为有一种更简单的方法可以使用.filter.map执行此操作? / p>

对Javascript / JQuery和JSON来说是非常新的。 似乎 就像我有一个名为“ProductID”的密钥,但我正在阅读的所有内容都没有引用单个密钥。好像,名称/值中的每个名称都被视为一个键。

我找到一个如何做到这一点的好例子的问题可能与我不知道这里涉及的所有事情的正确术语有关。

有人可以在JQuery中向我展示一个如何从上面的JSON中获取对象的示例,假设所需的ProductID存储为var ProductId中的字符串吗? (var ProductID =“000002”;)

我也很感激任何关于JSON和JQuery的良好引用的链接。我去过json.org和其他几个人,但他们对我的知识水平并不是很有帮助。 :S

1 个答案:

答案 0 :(得分:3)

如果您想查找具有给定产品ID的相应元素,可以使用.grep()函数。

像这样:

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
}