JavaScript遍历JSON对象报Unexpected token o错误如何解决

1. 报错核心原因 #

SyntaxError: Unexpected token o in JSON at position 1错误的触发原因是：你对已经解析完成的JavaScript对象重复执行了JSON.parse()操作。JSON.parse()的入参要求是符合JSON格式的字符串，当你传入JS对象时，JS会先将对象隐式转换为字符串[object Object]，解析第一个字符[符合语法，第二个字符o不符合JSON规范，直接抛出错误。
解决方式：打开location.page.ts文件，找到第71行调用JSON.parse()的代码，确认入参如果已经是JS对象，直接删除JSON.parse()调用即可。

2. 嵌套数组的正确遍历方式 #

你给出的示例数据是两层嵌套数组，用for...in遍历数组不符合最佳实践（会遍历原型链上的可枚举属性，容易出现意外结果），推荐使用如下方式遍历所有元素：

// 原变量名json容易产生误解，该值已经是解析完成的JS对象，不是JSON字符串
const data = [
  [{
    "Id": 1,
    "Name": "Jeffreys Bay",
    "ProvinceID": 1
  }, {
    "Id": 2,
    "Name": "Heidelberg",
    "ProvinceID": 3
  }]
]

// 方式1：已知结构的情况下直接取内层数组遍历
const locationList = data[0]
for (const item of locationList) {
  console.log(`Id: ${item.Id}, Name: ${item.Name}, ProvinceID: ${item.ProvinceID}`)
}

// 方式2：通用嵌套数组遍历
for (const innerArr of data) {
  for (const item of innerArr) {
    console.log(item)
  }
}

内容的提问来源于stack exchange，提问作者Daantjiekat