Parsing a JSON file using Javascript

Question

I am importing a nested JSON file and would like to be able to display the data extracted from the JSON file as a table.

How can I go through the different levels of this JSON file and be able to display specific data I need (example I would only like to display the inner most data).

Also, how can I access the children of nodes that have spaces on their key?

Here is a sample JSON file:

{
    "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"
                        }
                    }
                }
            }
        }
    ]
}

And here is my vue method snippet:

    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

Thanks!

score 1 · Answer 1 · answered Jan 21 '20 at 03:38

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

score 1 · Answer 2 · answered Jan 21 '20 at 03:38

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.

score 0 · Answer 3 · answered Jan 21 '20 at 03:38

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);

Parsing a JSON file using Javascript

3 Answers3