我有一个名为“产品”的字符串,每个对象都有多个字段,如下所示:

var prods = JSON.stringify ({"products": [

    {
        'prodname': 'Linkedin',
        'oem': 'Linkedin',
        'snippet': 'snippet goes here',
        'linkto': 'http://www.linkedin.com',
        'imagesource': 'resources/images/apps/linkedin.png',
        'category' : 'one'
    },
    {
        'prodname': 'Mozy',
        'oem': 'Mozy',
        'snippet': 'Mozy is the world’s most trusted online backup service for consumers and businesses.',
        'linkto': 'This is the app page links.',
        'imagesource': 'resources/images/apps/mozy.png',
        'category' : 'two'
    },
    {
        'prodname': 'Amazon',
        'oem': 'Amazon',
        'snippet': 'snippet goes here',
        'linkto': 'This is the app page links.',
        'imagesource': 'resources/images/apps/amazon.png',
        'category' : 'one'
    },


...并以这种方式继续。

我编写了一个脚本,该脚本将在页面上创建html元素,并使用字符串中的数据填充它们,从而创建应用商店类型的外观-效果很好。我的问题是我一次只能显示某个类别中的应用程序,因此例如,我希望能够选择字符串中所有具有“一个”类别的对象。

就目前而言,我的代码中选择元素的部分看起来像这样:

var prodobjects = JSON.parse(prods);

function popcatone(){

  var catnum =  prodobjects.products.category;
  var numberprods = catnum='one'.length;

  var looptimes = 0;
  if (numberprods > 5 & numberprods != 0) {
    looptimes = 5;
  }
  else {
    looptimes = numberprods;
  }
  for (i=0; i < looptimes; i++)

  {  //start loop

var imgsrc =  prodobjects.products[i].imagesource;
var h3text = prodobjects.products[i].prodname;
var oemtext = prodobjects.products[i].oem;
var descriptiontext = prodobjects.products[i].snippet;
var productlink = prodobjects.products[i].linkto;


...然后继续在html元素内分发数据。如您所见,该代码当前可以确定字符串中有多少个对象的“类别”为“一个”,并使用它来限制如果结果少于5个,则代码循环的次数,但是我可以没有弄清楚如何实际选择“类别”为“一个”的对象。就目前而言,代码正确地看到了结果数量,并确实在页面上呈现了正确数量的应用程序,但是结果只是线性排列,没有考虑类别。

我一直在努力为它做些小提琴,但是由于馈送给它的CSS非常复杂,所以我无法正确地代表行为。对于长期提出的问题以及答案或建议深表歉意。

我真的不是在找人为我做事,如果有人可以为我指出如何根据其中一个字段的值来选择对象的正确方向,我很乐意自己解决其余问题!

多谢您的耐心配合,我只在使用jquery 1.10.2作记录

最佳答案

如果您不需要在较旧的浏览器中使用此功能*,请使用filter

function getData(array, type, val) {
  return array.filter(function (el) {
    return el[type] === val;
  });
}

var data = getData(products, 'category', 'one');


Fiddle

* polyfills are available

07-24 09:46
查看更多