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

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>

我需要为所有类型创建 1 个列表 (li)。并再次循环遍历 json 以生成包含相同类型数据的单独 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

parse Json and create html with similar content

arrays

jquery

json

nested-loops

multidimensional-array