Discover how to access JSON data using a string key in Angular 2

Question

Trying to loop through JSON data in angular2 can be straightforward when the data is structured like this:

{fileName: "XYZ"}

You can simply use let data of datas to iterate over it.

But things get tricky when your JSON data keys are in string format, like this:

{"fileName": "XYZ"}

Answer 1

Answer №1

JSON must always have double quoted string keys, so examples like these are invalid:

{ fileName: "XYZ" }
{ 'fileName': "XYZ" }

However, this is a valid JSON format:

{ "fileName": "XYZ" }

Javascript objects do not require key quoting, but if used, single quotes can be used as well:

let a = { fileName: "XYZ" };
let b = { 'fileName': "XYZ" };
let c = { "fileName": "XYZ" };

Here, a, b, and c are all equivalent.

Regardless of the key formatting, iterating through JavaScript objects is done in the same manner:

for (let key in a) {
    console.log(`${ key }: ${ a[key] }`);
}

Object.keys(b).forEach(key => console.log(`${ key }: ${ b[key] }`));

Answer 2

JSON must always have double quoted string keys, so examples like these are invalid:

{ fileName: "XYZ" }
{ 'fileName': "XYZ" }

However, this is a valid JSON format:

{ "fileName": "XYZ" }

Javascript objects do not require key quoting, but if used, single quotes can be used as well:

let a = { fileName: "XYZ" };
let b = { 'fileName': "XYZ" };
let c = { "fileName": "XYZ" };

Here, a, b, and c are all equivalent.

Regardless of the key formatting, iterating through JavaScript objects is done in the same manner:

for (let key in a) {
    console.log(`${ key }: ${ a[key] }`);
}

Object.keys(b).forEach(key => console.log(`${ key }: ${ b[key] }`));