关于vue.js:JavaScript中循环遍历JSON响应

咱们在前端开发过程中，通过服务器获取数据的时候服务器返回的数据通常为 JSON 格局，明天小千就来教大家如何利用 JavaScript 解析服务器的响应获取咱们想要的游戏数据。

  该过程通常包含两个步骤：将数据解码为本机构造（例如数组或对象），而后应用 JavaScript 的内置办法遍历该数据结构。从近程 API 获取接口

  1. 应用 XMLHttpRequest API

1

  返回的数据为：// string

  // {"id":"helloworld","joke":"today is Friday!","status":200}

  服务器返回了一个字符串。咱们须要先将其解析为 JavaScript 对象，而后能力遍历其属性。咱们能够应用 JSON.parse() 做到这一点, 如下显示：

2

  2. 应用 Fetch API

  只管下面应用 XMLHttpRequest 对象的办法游戏成果很好，但在简单的场景下它就会变得十分蠢笨。上面咱们应用浏览器新提供的 api, 它是 window 对象上定义的办法 fetch，你能够应用该办法执行申请。此办法返回一个 Promise，可用于检索申请的响应。

3

  Fetch API 返回响应流。这不是 JSON，因而 JSON.parse() 须要尝试应用它的 response.json() 函数而不是对其进行调用。这将返回一个 Promise，该 Promise 会将响应的注释文本解析为 JSON 的后果进行解析。多种形式遍历数据

  1. 应用 for...in

4

  2. 应用 Object.entries，Object.values 或 Owww.pizei.combject.entries

5

  3. 解决数组

  值的有序列表（也称为数组）也是无效的 JSON，让咱们钻研如何解决此类响应。对于这个示例，咱们将应用 GitHub 的 REST API 来获取用户存储库的列表：

6

  如您所见，API 返回了一个对象数组。要拜访每个独自的对象，咱们能够应用惯例 forEach 办法：

7

  另外，您当然能够应用下面探讨的任何办法来遍历对象的所有属性，并将它们记录到控制台：

8

  论断

  在这篇文章中，咱们钻研了什么是 JSON。我曾经演示了如何将服务器的 JSON 响应解析为本机数据结构（例如数组或对象），以及如何遍历这种构造以拜访其中蕴含的数据。咱们大部分 web 服务与服务器的交互都是围绕这个这个开展，心愿这篇文章对您有所帮忙