我正在导入一个嵌套的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方法摘要:
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);
}
CodeSanboxLink:https://codesandbox.io/s/vue-quasar-template-enfjp
谢谢!
您不需要从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])
})
})
})
})
不确定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'])
我不确定是什么问题,但是如果您需要帮助以遍历JSON并将所有数据(例如,两个级别降低)提取到新的JSON中,则可以使用for...in
遍历JSON,或执行Object.entries(json).forEach
,然后将结果向下两层存储在新JSON中。
例如,如果要提取所有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);