使用 Javascript 解析 JSON 文件

Question

我正在导入一个嵌套的 JSON 文件，并且希望能够将从 JSON 文件中提取的数据显示为一个表格。

我怎样才能浏览这个 JSON 文件的不同层次并能够显示我需要的特定数据（例如我只想显示最里面的数据）。

另外，我如何访问键上有空格的节点的子节点？

这是一个示例 JSON 文件：

{
    "1234567ABCD123": [{
            "1111": {
                "File 1 Data Goes Here": {
                    "AA": {
                        "Some more data": {
                            "AAAA": [{
                                    "Data List": {
                                        "01": {
                                            "File Name": {
                                                "FN": "Hello"
                                            },
                                            "Author": {
                                                "A1": "John Doe"
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    }
                }
            }
        }
    ],
    "7654321ABCD321": [{
            "2222": {
                "File 2 Data Goes Here": {
                    "BB": {
                        "Data List": {
                            "File Name": "Hello Again"
                        }
                    }
                }
            }
        }, {
            "3333": {
                "File 3 Data Goes Here": {
                    "CC": {
                        "Data List1": {
                            "File Name": "Hello Again 2"
                        },
                        "Data List2": {
                            "File Name": "Hello Again 3"
                        },
                        "Data List3": {
                            "File Name": "Hello Again 4"
                        }
                    }
                }
            }
        }
    ]
}

这是我的vue方法sn-p：

    changeViaUpload(ev) {
      const file = ev.target.files[0];
      const reader = new FileReader();
      var vm = this;

      reader.onload = function(e) {
        vm.msg = "[" + e.target.result + "]";
        vm.show = true;

        vm.parsedJson = JSON.parse(vm.msg);

        console.log(vm.parsedJson);

        vm.parsedJson.forEach(function(item) {
          console.log("Outermost Data: " + item["1234567ABCD123"]);
        });
      };
      reader.readAsText(file);
    }

CodeSanbox 链接： https://codesandbox.io/s/vue-quasar-template-enfjp

谢谢！

Answer 1

您不需要从 JSON 创建任意数组，而是可以循环遍历对象的键。

另外，如果你想访问带空格的键，你只需使用数组键语法，这里有一个深度嵌套的例子：

const json = e.target.result
json['1234567ABCD123'][0]['1111']['File 1 Data Goes Here']['AA']['Some more data']['AAAA'][0]['Data List']["01"]['File Name']['FN']

这是你的循环示例：

Object.keys(json).forEach((key) => {
  json[key].forEach((el) => {
    Object.keys(el).forEach((inner) => {
      Object.keys(el[inner]).forEach((descriptor) => {
        console.log(el[inner][descriptor])
      })
    })
  })
})

Answer 2

不确定 vue 部分，但我创建了一个示例示例，可以帮助您了解如何访问其键上有空格的节点的子节点。示例如下：

let jsonData={
    "1234567ABCD123": [{
            "1111": {
                "File 1 Data Goes Here": {
                    "AA": {
                        "Some more data": {
                            "AAAA": [{
                                    "Data List": {
                                        "01": {
                                            "File Name": {
                                                "FN": "Hello"
                                            },
                                            "Author": {
                                                "A1": "John Doe"
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    }
                }
            }
        }
    ],
    "7654321ABCD321": [{
            "2222": {
                "File 2 Data Goes Here": {
                    "BB": {
                        "Data List": {
                            "File Name": "Hello Again"
                        }
                    }
                }
            }
        }, {
            "3333": {
                "File 3 Data Goes Here": {
                    "CC": {
                        "Data List1": {
                            "File Name": "Hello Again 2"
                        },
                        "Data List2": {
                            "File Name": "Hello Again 3"
                        },
                        "Data List3": {
                            "File Name": "Hello Again 4"
                        }
                    }
                }
            }
        }
    ]
}
console.log(jsonData['1234567ABCD123'][0]['1111']['File 1 Data Goes Here']['AA']['Some more data']['AAAA'][0]['Data List']['01']['File Name'])

我们可以通过两种方法访问 Objects 属性：

1) 点表示法：- 属性标识只能是字母数字（以及 _ 和 $）。属性不能以数字开头。

2)方括号 :- 方括号表示法允许访问包含特殊字符的属性和使用变量选择属性

您可以找到更多关于他们的信息here。

Answer 3

我不完全确定问题出在哪里，但如果您需要帮助来遍历 JSON 并将所有数据（例如，向下两层）提取到新的 JSON 中，那么您可以使用 for...in循环一个 JSON，或者做Object.entries(json).forEach，然后将结果存储在一个新的 JSON 中向下 2 层。

例如，如果您想将所有数据提取 2 层并将其放入新的 JSON 中，请执行以下操作（假设解析的 json 在名为“parsed”的变量中）：

var parsed = {
    "1234567ABCD123": [{
            "1111": {
                "File 1 Data Goes Here": {
                    "AA": {
                        "Some more data": {
                            "AAAA": [{
                                    "Data List": {
                                        "01": {
                                            "File Name": {
                                                "FN": "Hello"
                                            },
                                            "Author": {
                                                "A1": "John Doe"
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    }
                }
            }
        }
    ],
    "7654321ABCD321": [{
            "2222": {
                "File 2 Data Goes Here": {
                    "BB": {
                        "Data List": {
                            "File Name": "Hello Again"
                        }
                    }
                }
            }
        }, {
            "3333": {
                "File 3 Data Goes Here": {
                    "CC": {
                        "Data List1": {
                            "File Name": "Hello Again 2"
                        },
                        "Data List2": {
                            "File Name": "Hello Again 3"
                        },
                        "Data List3": {
                            "File Name": "Hello Again 4"
                        }
                    }
                }
            }
        }
    ]
},
	newP = {};
for(var k in parsed) {
    if(parsed[k].forEach) {
        parsed[k].forEach(x => {
            for(var kk in x) {
				for(var okk in x[kk]) {
					newP[okk] = x[kk][okk];
				}
			}
        });
    }
}

console.log("And your 2nd level data is: ", newP);