[Vuejs]-Parsing a JSON file using Javascript

1đź‘Ť

You don’t need to create an arbitrary array from your JSON, you can loop over the keys of your object instead.

Also, if you want to access keys with spaces, you just use array key syntax, here’s a deeply nested example:

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']

And here’s your loop example:

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])
      })
    })
  })
})

1đź‘Ť

Not sure on vue part but I have created a sample example which can help you understand how to access the children of nodes that have spaces on their key. Here is the example:

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'])

We can access Objects property through two methods:

1) Dot notation :- property identifies can only be alphanumeric (and _ and $). Properties can’t start with a number.

2)Square bracket :- Square bracket notation allows access to properties containing special characters and selection of properties using variables

You can found more about them here.

0đź‘Ť

I’m not exactly sure what the problem is, but if you need help to loop through a JSON and extract all of the data, say, two levels down, into a new JSON, then you can use the for...in to loop through a JSON, or do Object.entries(json).forEach, then store the result 2 layers down in a new JSON.

For example, if you want to extract all of the data 2 layers down and put it in a new JSON, do something like the following (assuming the parsed json is in a variable called “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);

Leave a comment