JSON解析错误 - 位置1的JSON中出现意外的令牌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);
      },
    });

这返回：

在位置1的JSON中出现意外的令牌o

经过进一步的研究：

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

这给了我：

未定义

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

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>

Comments questions

console.log(data.title);未定义，因为我们没有循环它，对吧？

的种类。它是undefined因为data是一个数组。并且JavaScript数组没有title属性。

在data.forEach(function (d) {线，(d)究竟是什么？这个价值来自哪里？它代表什么？

.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，第二次是2，最后一次是3。

为什么香草JS循环不能通过(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];得到每个data元素。

Answer 2

嵌套数据结构是引用其他数组或对象的数组或对象，即其值是数组或对象。可以通过连续应用点或括号表示来访问这种结构。

这是一个例子：

const data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

假设我们想要访问第二个项目的名称。

以下是我们如何逐步完成的工作：

我们可以看到数据是一个对象，因此我们可以使用点表示法访问其属性。 items属性访问如下：

data.items

值是一个数组，要访问它的第二个元素，我们必须使用括号表示法：

data.items[1]

该值是一个对象，我们再次使用点表示法来访问name属性。所以我们最终得到：

const item_name = data.items[1].name;

或者，我们可以为任何属性使用括号表示法，特别是如果名称包含使点符号用法无效的字符：

const item_name = data['items'][1]['name'];

要迭代data.items数组的所有元素，我们使用for循环：

for(let i = 0, l = data.items.length; i < l; i++) {
    // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration
    // we can access the next element in the array with `data.items[i]`, example:
    // 
    // var obj = data.items[i];
    // 
    // Since each element is an object (in our example),
    // we can now access the objects properties with `obj.id` and `obj.name`. 
    // We could also use `data.items[i].id`.
}

也可以使用for...in迭代数组，但有理由应该避免这种情况：Why is 'for(var item in list)' with arrays considered bad practice in JavaScript?。