使用jQuery从JSON返回嵌套值

我正在从服务器接收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
                ]
            }]
        }]
    }
}

我正在尝试使用这些数据中的发布者构建一个下拉菜单，目前我可以通过下拉菜单返回流派，但不能返回发布者

我一直在尝试使用。每个都可以从每个流派中选取出版商，因此在下拉列表中，我将以以下内容结束： 广场 暴风雪 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");
 });

函数renderCombo（）{
var parseData=JSON.parse（$myData）；
$（parseData.Genre）。每个（函数（i）{
$（“#pubCombo”）。追加（$（“”{
瓦尔：这是出版商，
html：这个是publisher
}));
$（'#pubCombo'）。选择选择器（“刷新”）；
});

})

$myData是从服务器检索到的数据，它可以很好地用于我的所有其他下拉列表，因此我知道它是我的renderCombo函数

---

有什么办法可以做到这一点吗

在每个发布服务器上添加另一个：

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

函数附件选项（选项）{
如果（！appendOption.distinct[option.publisher]）{//检查缓存
$（“#pubCombo”）。追加（$（“”{
val:option.publisher，
html:option.publisher
}));
appendOption.distinct[option.publisher]=option.publisher；
}
}
appendOption.distinct={}//隐藏物

---

更新：改进了使用伪缓存的第二个函数

在每个发布服务器上添加另一个：

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

函数附件选项（选项）{
如果（！appendOption.distinct[option.publisher]）{//检查缓存
$（“#pubCombo”）。追加（$（“”{
val:option.publisher，
html:option.publisher
}));
appendOption.distinct[option.publisher]=option.publisher；
}
}
appendOption.distinct={}//隐藏物

---

更新：改进了使用伪缓存的第二个函数

您不必使用JSON.parse-jQuery可以直接读取对象和数组而无需解析：）您还应该检查对象的语法错误，以防万一

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

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

---

请参见此处的fiddle:

您不必使用JSON.parse-jQuery可以直接读取对象和数组而无需解析：）您还应该检查对象的语法错误，以防万一

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

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

请看这里的fiddle:

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

问题在于（除了源数据中的一些输入错误，以及函数中的“流派”而不是“流派”），每个流派都有多个发布者，因此您无法一次获得它们

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
    }));
};

var uniquepublisher={}；
$（parsedData.genres）。每个（函数（）{
$（this.publisher）。每个（函数（）{
uniquepublisher[this.publisher]=true；
});
});
for（uniquePublishers中的出版商）{
$（“#pubCombo”）。追加（$（“”{
瓦尔：出版商，
html：出版商
}));
};

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

问题在于（除了源数据中的一些输入错误，以及函数中的“流派”而不是“流派”），每个流派都有多个发布者，因此您无法一次获得它们

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
    }));
};

var uniquepublisher={}；
$（parsedData.genres）。每个（函数（）{
$（this.publisher）。每个（函数（）{
uniquepublisher[this.publisher]=true；
});
});
for（uniquePublishers中的出版商）{
$（“#pubCombo”）。追加（$（“”{
瓦尔：出版商，
html：出版商
}));
};

---

您好，谢谢，那太好了，有没有一种方法可以对它应用“独特的”功能？例如，EA也做运动游戏，我只需要看一次，而不需要在下拉列表中多次列出。@Hagbard修复了

$.each（）？

问题，该问题由一位评论人在您的问题中指出，还添加了过滤功能以删除多余的发布者。您好，谢谢，那太好了，有没有一种方法可以对其应用“独特”功能？例如，EA也做体育游戏，我只需要查看一次，而不是在下拉列表中多次列出。@Hagbard修复了您的问题中一位评论员指出的

$.each（）？

问题，还添加了过滤功能以删除多余的发布者。您好，这也很有效，但像我的其他评论一样，我应该澄清一下，有没有一种方法可以应用唯一/独特的过滤器？因为如果一个出版商以多种风格出现，我会看到很多次。谢谢，我已经更新了我的答案，以按值检查现有选项。您好，这也很有效，但像我的其他评论一样，我应该澄清一下，有没有一种方法可以应用唯一/独特的过滤器？因为如果一个出版商以多种风格出现，我会看到很多次。谢谢，我已经更新了我的答案，以检查现有的选项的价值。是的，这正是我的问题，例如，我看到很多EA的，因为他们发表在每一个网站genre@Hagbard更新了我的答案，以解释重复的问题。是的，这正是我面临的问题，例如，我看到很多EA，因为他们在每一个网站上发布genre@Hagbard更新了我的答案以解释重复的答案。到目前为止，答案都使用了表单的结构，它们应该在什么时候使用。From：目前，在jQuery中包装的普通JavaScript对象上支持的唯一操作是：

.data（）

，

.prop（）

，

.on（）

，

.off（）

，

.trigger（）

和

.triggerHandler（）

。感谢您的回答，我最终使用了Wilmer进行缓存，但非常感谢您的回复！到目前为止，所有的答案都使用了形式的结构，当他们应该使用的时候。From：目前，在中包装的纯JavaScript对象上支持的唯一操作