javascript - JSON 解析错误 - JSON 中位置 1 处出现意外标记 o

Question

我需要获取一个 JSON 对象并记录标题控制台以实现自动完成功能。我的 json 的示例如下:

[
  {
    "title": "Example 1",
    "url": "http:\/\/www.example1.com\/"
  },
  {
    "title": "Example 2",
    "url": "http:\/\/www.example2.com\/"
  },
  {
    "title": "Example 3",
    "url": "http:\/\/www.example3.com\/"
  }, ...

我想在我的控制台中记录所有标题，如下所示:

Example 1
Example 2
Example 3

我最初尝试做我想做的事情是这样的:

$.ajax({
      type: "GET",
      dataType: 'json',
      url: "/url/to/json/",
      success: function(data) {
        var searchResults = JSON.parse(data);
        console.log(searchResults.title);
      },
    });

返回:

Unexpected token o in JSON at position 1

经过进一步研究:

Unexpected token o in JSON at position 1

SyntaxError: Unexpected token o in JSON at position 1

What is causing “Uncaught SyntaxError: Unexpected token o” with $.parseJSON() and JSON.parse()

建议数据已经解析。因此，我尝试按照这些答案的建议直接调用该对象:

$.ajax({
      type: "GET",
      dataType: 'json',
      url: "/url/to/json/",
      success: function(data) {
        console.log(data.title);
      },
    });

这给了我:

undefined

如何在控制台中打印特定的 JSON 数据(在本例中为标题)？如果数据已经解析，那么为什么当我尝试访问它时它返回未定义？

Answer 1

如果您的数据具有以下格式:

[
  {
    "title": "Example 1",
    "url": "http:\/\/www.example1.com\/"
  },
  {
    "title": "Example 2",
    "url": "http:\/\/www.example2.com\/"
  },
...

要打印每个 title/url，您需要迭代结果(使用 for 或调用 forEach如下):

$.ajax({
  type: "GET",
  dataType: 'json',
  url: "https://api.myjson.com/bins/1czpnp",
  success: function(data) {
    console.log(data.title); // undefined
    console.log(data); // the [{...}] object

    // to print the title/urls, iterate over the array
    // alternative 1 (ordinary for):
    for(var i = 0; i < data.length; i++) {
      var d = data[i];
      console.log('title: ' + d.title + ' ~ url: ' + d.url);
    };

    // alternative 2 (forEach):
    data.forEach(function (d) {
      console.log('title: ' + d.title + ' ~ url: ' + d.url);
    });
  },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

评论问题

console.log(data.title); is undefined because we are not looping through it, right?

有点。它是未定义，因为data是一个数组。 JavaScript 数组没有 title 属性。

in the line data.forEach(function (d) { , what exactly is (d)? Where is that value coming from? What does it represent?

.forEach 是 JavaScript 数组中存在的一种方法。它接受一个函数作为参数，然后在数组的每个元素上调用该函数。

示例:

var myArray = [1, 2, 3];
myArray.forEach(function (number) { console.log(number); });

将在控制台中打印:

1
2
3

这是调用function (number) { console.log(number); 的结果。 } 三次(myArray 数组的每个元素一次)，其中第一个 number 值为 1，第二个 number 值为 1时间为 2，最后一次为 3。

And why does the vanilla JS loop not pass in (d)

for 仅仅是执行给定语句指定的次数。它不会传递 d，因为不涉及 function 参数(正如 .forEach 所发生的那样)。

换句话说，for 是:

for(var i = 0; i < n; i++) {
  // execute whatever is here "n" times, each time having "i" being a different value
}

所以当我们这样做时

for(var i = 0; i < data.length; i++) {
  // some command
}

我们要求执行一些命令data.length次。 data.length 是一个数字，表示数据数组的长度。 (例如，['a','b'].length 为 2)。

由于它只是执行一个命令，所以我们每次都必须自己“创建”d，因此:var d = data[i];来获取每个数据元素。