使用 Javascript 输出 Json 数组答案

【问题标题】：Output Json Arrays with Javascript使用 Javascript 输出 Json 数组
【发布时间】：2012-11-19 11:01:15
【问题描述】：

我对 Javascript 和 Json 非常陌生，需要以下方面的帮助。这是一些json数据：

"genres": [

 {
    "id": 28,
    "name": "Action"
 },
 {
    "id": 18,
    "name": "Drama"
 },
 {
    "id": 14,
    "name": "Fantasy"
 },
 {
    "id": 36,
    "name": "History"
 }

],

现在我想输出所有类型的名称

我正在使用 jquery mobile 和 ajax 来检索 json 数据。在我的函数中，它看起来像这样：

var genres = results.genres[0].name;
$('#tmdbInfo2').html('<br>Genres: ' +genres);

在这个例子中，我们将展示流派的第一个元素（动作），但不是全部。输出应该是：动作、戏剧、幻想、历史。有时流派元素的数量会有所不同..

请帮帮我，这让我很困惑 O_o

【问题讨论】：

我很抱歉这么说，但你应该简单地用谷歌搜索一下。或者打开一个关于 Javascript 数组的基础教程。
我已经做到了，相信我。我不是程序员。我找到了很多示例，但无法将其转移到我的问题上。
没有人天生就是程序员。如果你想做编程，那么，除了学习，你别无他法。

标签： javascript arrays json jquery

【解决方案1】：

纯 Javascript

这就是您使用for 循环（do not use a for...in loop on arrays，如果您有兴趣的话）对数组元素进行迭代的方式。

for (var i = 0; i < results.genres.length; i++) {
    console.log( results.genres[i].name );
}

你的数组在这里被称为results.genres。在循环内部，results.genres[i] 将始终引用当前元素。

jQuery

我看到你使用的是jQuery，所以你也可以像这样使用$.each()：

$.each(results.genres, function (currentIndex, currentElem) {
    console.log( currentElem.name );
});

【讨论】：

什么是console.log？我会尝试进一步解决这个问题。谢谢！
@RaveN 不仅程序员可以使用 Google。 console.log() 将值打印到浏览器的控制台。

【解决方案2】：

另一种迭代方式：

results.genres.forEach(function(genre) {
    console.log(genre.name);
});

对于你想要做的事情：

$('#tmdbInfo2').html(
    'Genres: ' + results.genres.map(function(genre) {
        return genre.name;
    }).join(', ')
);

【讨论】：

谢谢你。但是如何将结果保存在变量中并使用 html 输出每个项目？我知道这都是基本的：p
在 .join()、.map() 返回一个 jQuery 包装的数组之前，您还需要一个 .get()。另外，我发现您的示例对于初学者来说非常令人困惑，但这很好:)。
@bažmegakap：为什么Array.prototype.map 会返回一个 jQuery 包装的数组？
这正是我所需要的！你为我节省了很多小时的工作，而我目前还没有。很棒的社区！
@RaveN 您可以通过此答案左侧的勾号接受他的答案。请这样做。

【解决方案3】：

您可以使用这样的 for-in 循环访问数组值：

var result = "";

for (i in genres.name) {
  result += genres.name[i];
} 

console.log(result);

【讨论】：

【解决方案4】：

你可以使用

<script>
   results = '{ "genres": [{ "id": 28, "name": "Action" },{ "id": 18, "name": "Drama" },{ "id": 14, "name": "Fantasy" },{ "id": 36, "name": "History" }] }';    
   results = JSON.parse(results);

       for($i in results.genres){
            console.log(results.genres[$i].name);
       }

</script>

JSON.parse 方法将字符串解析为 JSON，可以选择转换解析产生的值，您可以从类似数组的节点中获取值。当您使用for($i in results.genres) 时，您不会设置限制大小，“获取所有数组/对象元素的情况”。

Group Elements 需要介于 { "genres": [{ ...}] } 之间，以便您的 JSON 被读取。

【讨论】：

当您使用$i 调用results.genres[$i].name 时，函数获取id 元素在此内部从0 开始。如果您只想获取第一个元素，请设置此results.genres[0].name。
示例 JAVASCRIP jsfiddle.net/xtwqr937 示例 JQUERY jsfiddle.net/a7abb0bd