在打字稿中解析 JSON 数组

Posted

技术标签:

【中文标题】在打字稿中解析 JSON 数组【英文标题】:Parsing JSON array in typescript 【发布时间】:2019-01-13 03:34:53 【问题描述】:

我想在 typescript 中解析数组。

我的代码如下:

interface MyObj 
  val1: string
  val2: string
  val3: string


const fs = require('fs')
const file = 'test.json'
const encode = 'utf8'
const jsonString = '[val1 : "test1", val2 : "test2", val3 : "test3",  val1 : "test4", val2 : "test5", val3 : "test3"]'
fs.writeFile(file, JSON.stringify(jsonString))
fs.readFile(file, encode, (err, data) => 
  const objs = JSON.parse(data) as MyObj[]
  console.log(data)
  console.log(objs)

  for (const obj of objs) 
    console.log(obj)
    console.log(obj.val1)
    console.log(obj.val2)
    console.log(obj.val3)
  

)

那么结果如下:

"[val1 : \"test1\", val2 : \"test2\", val3 : \"test3\",  val1 : \"test4\", val2 : \"test5\", val3 : \"test6\"]"
[val1 : "test1", val2 : "test2", val3 : "test3",  val1 : "test4", val2 : "test5", val3 : "test6"]
[
undefined
undefined
undefined

undefined
undefined
undefined
v
undefined
undefined
undefined
a
undefined
undefined
undefined
l
undefined
undefined
undefined
1
undefined
undefined
undefined
.
.
.

好像parse成功了,但是解析后可能有语法错误却找不到。

我的环境是:

MacOS 10.12.6

NPM 5.6.0

TypeScript 2.9.1

感谢您的帮助。

【问题讨论】:

我认为您的 JSON 字符串有问题。你能试试这个吗? '["val1" : "test1",...... 【参考方案1】:

您的代码存在几个问题。

首先,json 语法要求您引用属性为 "val1": "test1" 而不是 val1: "test1"

其次,您应该使用import fs = require('fs') 语法进行导入。

第三,也是最重要的,你将 json 作为字符串写入文件。 jsonString 已经是一个字符串,不需要再在上面使用stringify。如果你这样做,解析的结果将是一个字符串而不是一个对象数组。

interface MyObj 
    val1: string
    val2: string
    val3: string


import fs = require('fs')
const file = 'test.json'
const encode = 'utf8'
const jsonString = '["val1" : "test1", "val2" : "test2", "val3" : "test3",  "val1" : "test4", "val2" : "test5", "val3" : "test3"]'
fs.writeFileSync(file, jsonString);
fs.readFile(file, encode, (err, data) => 
    const objs = JSON.parse(data) as MyObj[]
    console.log(data)
    console.log(objs)

    for (const obj of objs) 
        console.log(obj)
        console.log(obj.val1)
        console.log(obj.val2)
        console.log(obj.val3)
    

)

【讨论】:

你拯救了我的一天。【参考方案2】:

问题是您的对象中的键周围没有任何双引号 (")。因此 JSON 无效,浏览器无法成功解析。

所以不是


  val1: "test1",
  val2: "test2",
  val3: "test3"

你应该有


  "val1": "test1",
  "val2": "test2",
  "val3": "test3"

您始终可以在jsonlint.com 等网站上检查您是否拥有有效的 JSON。

【讨论】:

【参考方案3】:

您的代码有几个问题。

    '[val1 : "test1", val2 : "test2", val3 : "test3", val1 : "test4", val2 : "test5", val3 : "test3"]' 不是有效的 JSON。属性名称应该有双引号。 您在将字符串写入文件之前对其进行字符串化。然后在你读回来后解析它。这两个操作会有效地相互抵消,您会得到一个(格式不太好的)JSON 字符串。

您应该将属性名称用双引号括起来并删除JSON.stringify。尽管不完全确定为什么将其写入文件只是为了读回它?

const jsonString = '["val1" : "test1", "val2" : "test2", "val3" : "test3",  "val1" : "test4", "val2" : "test5", "val3" : "test3"]';
fs.writeFile(file, jsonString);
fs.readFile(file, encode, ...

【讨论】:

以上是关于在打字稿中解析 JSON 数组的主要内容,如果未能解决你的问题,请参考以下文章

如何在反应打字稿中从json文件中获取和显示数据

打字稿中 obj.prop 和 obj['prop'] 的区别?

打字稿中的Angular js Http承诺

从打字稿中的索引文件导出JSON文件

打字稿中的数组

如何在打字稿中进行json操作[关闭]