Question

我从服务器接收JSON，看起来像这样。

{"genres": [{
        "genre": "RPG",
        "publishers": [{
            "publisher": "Square",
            "games": [{
                "game": "FFX",
                "rating": [
                    12, 15
                ]
            }]
        }, {
            "publisher": "Blizzard",
            "games": [{
                "game": "Starcraft",
                "rating": [
                    10, 12
                ]
            }, {
                "game": "Diablo",
                "rating": [
                    15
                ]
            }, ]
        }]
    }, {
        "genre": "Action",
        "publishers": [{
            "publisher": "EA",
            "games": [{
                "game": "COD",
                "rating": [
                    18, 20
                ]
            }, {
                "game": "Titanfall",
                "rating": [
                    18
                ]
            }]
        }]
    }
}

我尝试使用此数据中的发布商构建一个下拉菜单，此时我可以让Dropdown返回该类型，但不是发布者。

我一直在尝试使用.each从各种类型中选择发布者，所以在下拉列表中我最终会：广场暴风雪 EA

到目前为止我的代码是：

  function renderCombo(){
  var parseData= JSON.parse($myData);
 $(parseData.Genre).each(function (i) {
     $("#pubCombo").append($("<option/>", {
         val: this.publisher,
         html: this.publisher
     }));
     $('#pubCombo').selectpicker("refresh");
 });

};

$ myData是从服务器检索到的数据，它适用于我所有其他下拉菜单，所以我知道它是我的renderCombo函数。

有关如何实现这一目标的任何想法？

Answer 1

您不必使用JSON.parse - jQuery可以直接读取对象和数组而无需解析:)您还应检查对象是否存在语法错误，以防万一。

如果您只想收集数据中所有发布商的列表，可以使用以下代码：

$.each($myData.genres, function () {
    $.each(this.publishers, function() {
        $("#pubCombo").append($("<option/>", {
            val: this.publisher,
            html: this.publisher
        }));
    });
});

请参阅此处的概念验证小提琴：http://jsfiddle.net/teddyrised/N6FAk/

更新：如果您想要返回一组独特的发布商，可以使用jQuery的.unique()方法：

var parseData = $myData,
    pubList = [];

$(parseData.genres).each(function () {
    $(this.publishers).each(function() {
        pubList.push(this.publisher);
    });
});

var uniquePubList = pubList.filter(function(v,i,pubList) {
    return i == pubList.indexOf(v);
});

$.each(uniquePubList, function (i,v) {
    $("#pubCombo").append($("<option/>", {
        val: v,
        html: v
    }));
});

请参阅此处的小提琴：http://jsfiddle.net/teddyrised/N6FAk/3/

Answer 2

（现在编辑这个答案，我看到的问题确实是如何消除重复）

问题（除了源数据中的一些拼写错误，以及＆＃34;类型＆＃34;而不是＆＃34;类型＆＃34;在您的函数中）是每个类型有多个发布者，所以你无法一次性获得它们。

var uniquePublishers = {};
$(parsedData.genres).each(function () {
    $(this.publishers).each(function () {
        uniquePublishers[this.publisher] = true;
    });
});
for (publisher in uniquePublishers) {
    $("#pubCombo").append($("<option/>", {
        val: publisher,
        html: publisher
    }));
};

Fiddle

Answer 3

添加另一个也遍历发布者：

function renderCombo() {
    var parseData = JSON.parse($myData);
    $(parseData.genres).each(function (i) {
        $(this.publishers).each(function (i) {
            appendOption(this);
        });
    });
    $('#pubCombo').selectpicker("refresh");//refresh when finished
};

更新为不附加重复选项：

function appendOption(option) {

    if ( !appendOption.distinct[option.publisher] ) {//check cache

        $("#pubCombo").append($("<option/>", {
            val: option.publisher,
            html: option.publisher
        }));
        appendOption.distinct[option.publisher] = option.publisher;

    }
}

appendOption.distinct= {};//cache

更新：改进了第二个使用伪缓存的功能。

使用jQuery从JSON返回嵌套值

3 个答案: