如何通过JavaScript中的JSON响应循环

本教程演示了如何使用JavaScript从远程服务器收到的有效解析JSON数据。 我们将分两个步骤介绍该过程：将JSON字符串解码为可用的JavaScript结构（对象或数组），然后遍历该结构以访问数据。 我们将使用XMLHttpRequest和更现代的fetchapi的实践示例。

密钥概念：

1. JSON（JavaScript对象符号）：一种基于文本的数据交换格式，广泛用于Web应用程序中。 虽然受JavaScript对象字面语法的启发，但JSON严格需要围绕键的双引号。
JSON解析：将JSON字符串转换为JavaScript对象或数组的过程。 这是至关重要的，因为服务器将数据作为字符串发送，需要在使用之前对其进行解析。
2. > 迭代：在解析后，我们使用JavaScript的内置方法，例如
>，
3. ，，或数组方法（等）来访问单个数据元素在解析结构中。for...in Object.entries Object.valuesforEach理解JSON：

JSON数据可以通过两种方式构造：>

> json对象：

>名称/值对的集合（类似于JavaScript对象）。

JSON数组：
• 值的有序列表（类似于JavaScript数组）。
• >用 fetching json：
>

>

>让我们以api（一个简单的笑话API）为例。 此API返回JSON数据时，将标题设置为XMLHttpRequest>。>。

首先，我们获取数据：>

icanhazdadjoke响应是字符串。 我们使用Accept：application/json对其进行解析。

>现在，我们可以迭代对象的属性。 以下是几种方法：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(typeof xhr.responseText); // Output: string
    console.log(xhr.responseText);       // Output: JSON string
  }
};
xhr.open('GET', 'https://icanhazdadjoke.com/', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);

JSON.parse()

循环：

if (xhr.readyState === XMLHttpRequest.DONE) {
  const response = JSON.parse(xhr.responseText);
  console.log(response); // Output: Parsed JavaScript object
}

• for...in ：
一种更现代，更简洁的方法：

for (const key in response) {
  if (response.hasOwnProperty(key)) {
    console.log(`${key}: ${response[key]}`);
  }
}

• >用Object.entries()api：
API提供了一种更清洁的，有前途的方法：>

Object.entries(response).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

解析响应主体作为JSON，并返回通过解析数据解决的诺言。fetch

>处理JSON数组：>

>让我们从GitHub API中获取一个存储库列表：> fetch

此示例使用

(async () => {
  const response = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  const jsonData = await response.json();
  Object.entries(jsonData).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
})();

通过JSON数组演示。 您可以使用其他数组方法（例如

>或response.json()）进行更复杂的操作。

>

结论：

该教程涵盖了使用JavaScript中的JSON响应进行解析和迭代的基本步骤，同时使用XMLHttpRequest和fetch> api。请记住在生产环境中处理潜在错误（例如，网络问题，无效的JSON）。 具有基于承诺的方法的API通常是其清洁语法和更好的错误处理功能的首选。

以上是如何通过JavaScript中的JSON响应循环的详细内容。更多信息请关注PHP中文网其他相关文章！