解析从 Go/Golang 服务器获取的意外 JSON 数据并转换为数字的 React 操作

积累知识，胜过积蓄金银！毕竟在Golang开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《解析从 Go/Golang 服务器获取的意外 JSON 数据并转换为数字的 React 操作》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

我正在构建一个 web 应用程序，它使用 go 服务器向 react 应用程序提供数据。

在构建我的服务器时，我遵循了go文档（https://golang.org/doc/tutorial/web-service-gin）提供的教程。我的代码与该代码非常相似，当我使用curl时，我得到了预期的结果。

[
  {
    "id":0,
    "date":"2021-11-21t12:00:00z",
    "rentedto":"bob",
    "rentedby":"jim"
  },
  //etc...

但是，当我使用 react 的 fetch api 时，我的结果以意外的形式返回。

fetch('http://localhost:8080/rentals')
.then((response)=> {
  if (response.ok) {
    return response.json();
  }
  throw response;
.then((jsonarr) => {
  handlerentalsdata(jsonarr)
  })
.catch((error) => {
  console.error("error fetching data: ", error);
});

当我 console.log(jsonarr) 时，浏览器报告以下内容：

array(3) [ {...},{...},{...} ]
//expanding this object via the console shows the following information:
---> 0: object { id: 0, date: "2021-11-21t12:00:00z", rentedto: "bob", ... } 
---> 1: object { id: 1, date: "2021-11-22t12:00:00z", rentedto: "bob", ... }
---> 2: object { id: 2, date: "2021-11-23t12:00:00z", rentedto: "bob", ... }

这些索引（以及浏览器的标签）表明数据现在采用数组的形式，所以我这样对待它。

我试图循环遍历这个数组来解析其中的 json 字符串，但是 json.parse(data) 只生成数字（分别为 0、1 和 2），而不是像我预期的那样生成对象。

for (const json in jsonarr){
  console.log(typeof json);            //string
  const rentalobj = json.parse(json);
  console.log(typeof rentalobj);       //number
  console.log(rentalobj);              //0, 1, and 2 respectively
  console.log(rentalobj.date);         //undefined, because rentalobj is now a number.
}

我做了一些搜索，听说数据传入的数组的索引可能会导致问题，所以我也尝试使用 reviver 函数进行解析。

for (const json in jsonArr){
  console.log(typeof json);            //string
  const rentalObj = JSON.parse(json, (key, value) => {
    console.log(key);                  //<empty string>
    console.log(value);                //0, 1, and 2
    return(value);
  });
  console.log(typeof rentalObj);       //number
  console.log(rentalObj);              //0, 1, and 2 respectively
  console.log(rentalObj.date);         //undefined
}

尝试 json.parse(jsonarr) 会引发错误，正如预期的那样。我很困惑。为什么它会解析成一个（n索引）数字？当解析（或打印）数组内部的字符串仅产生数字时，如何提取数组内部的对象？

正确答案

for 中的 json 值（jsonarr 中的 const json）{ 将设置为 jsonarr 数组的“可枚举属性”，在本例中为索引。

for (const x in ['foo','bar','baz']) { console.log(x) };
// output:
// 0
// 1
// 2

所以您可能不想将 用于 ... in。相反，您可以使用 for ... of 来迭代数组的元素：

for (const x of ['foo','bar','baz']) { console.log(x) };
// output:
// foo
// bar
// baz

Array iteration and for ... in：

注意： for...in 不应用于迭代索引顺序很重要的数组。

数组索引只是具有整数名称的可枚举属性 其他方面与一般对象属性相同。没有 保证 for...in 将返回任何特定的索引 命令。 for...in 循环语句将返回所有可枚举的 属性，包括具有非整数名称的属性和那些具有非整数名称的属性 继承。

因为迭代的顺序是依赖于实现的，所以迭代 数组上的元素可能不会以一致的顺序访问。所以， 最好使用带有数字索引的 for 循环（或 Array.prototype.forEach() 或 for...of 循环）迭代时 访问顺序很重要的数组。

今天关于《解析从 Go/Golang 服务器获取的意外 JSON 数据并转换为数字的 React 操作》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！