Question

我有一个json文件，需要生成它的html。

<code>{
    "Exhibitors": {
        "Exhibitor": [
            {
                "LOGO": "logo1.jpg",
                "TYPE": "Exhibitor"
            },
            {
                "LOGO": "logo2.jpg",
                "TYPE": "Exhibitor"
            },
            {
                "LOGO": "logo3.jpg",
                "TYPE": "silver"
            },
            {
                "LOGO": "logo4.jpg",
                "TYPE": "gold"
            }
        ]
    }
}</code>

我需要为所有TYPE创建1个列表（li）。并再次遍历json以生成包含相同TYPE数据的单独div。

我可以使用以下代码生成列表：

<code>
jquery.ajax({
url: "js/sponsors.json",
dataType: "json",
success: function (data) {
        var json = jquery.parseJSON(data);
        var getTYPE = {};
        var items = json.Exhibitors.Exhibitor;
        var types = [];
        var j = 1;
        for (var item, i = 0; item = items[i++];) {
           var type = item.TYPE;
           if (!(type in getTYPE)) {
              getTYPE[type] = 1;
              if (type != "" && type != "Test") {
                  types.push(type);
                  jquery('ul').append('<li id=tab"' + j + '"><a>' + type + '</a> </li>');
                  j++; 
              }
            }
        }
        }
})
</code>

但是当循环遍历数据以隔离相似类型的内容时，上述代码并不起作用。请建议突破。

HTML应如下所示：

<code>
< ul>
< li>Exhibiotor< /li>
< li>Silver< /li>
< li>Gold< /li>
< /ul>

< div>Exhibitor
  < div>logo1.jpg< /div>
  < div>logo2.jpg< /div>
< /div>

< div>Silver
  < div> logo3.jpg< /div>
< /div>

< div>Gold
  < div> logo4.jpg< /div>
< /div>
</code>

Answer 1

不要只将1放入getTYPE，而是将每个元素设为所有徽标的数组。

    for (var item, i = 0; item = items[i++];) {
       var type = item.TYPE;
       if (!(type in getTYPE)) {
          getTYPE[type] = [item.LOGO];
          if (type != "" && type != "Test") {
              types.push(type);
              jquery('ul').append('<li id=tab"' + j + '"><a>' + type + '</a> </li>');
              j++; 
          }
        } else {
          getTYPE[type].push(item.LOGO);
        }
    }

然后你可以遍历getTYPE来制作带有徽标的所有DIV。

$.each(getTYPE, function(type, logos) {
    $.each(logos, function(i, logo) {
        ...
    });
});

Answer 2

var items = json.Exhibitors.Exhibitor;
for (var i = 0; i < items.length; i++) {
    if (items[i]['TYPE'] != "Test") {
        if ($('#' + items[i]['TYPE']).length == 0) {
            $('<div/>', {
                id: items[i]['TYPE'],
                text: items[i]['TYPE']
            }).appendTo('body');
        };
        $('ul').append('<li>' + items[i]['TYPE'] + '</li>');
        $('#' + items[i]['TYPE']).append('<div>' + items[i]['LOGO'] + '</div>');
    }
}

结果：

<div id="Exhibitor">Exhibitor
    <div>logo1.jpg</div>
    <div>logo2.jpg</div>
</div>
<div id="silver">silver
    <div>logo3.jpg</div>
</div>
<div id="gold">gold
    <div>logo4.jpg</div>
</div>

Fiddle

解析Json并创建具有类似内容的html

2 个答案: