Getting Json-Data from Fetch

Question

my Json-file is a simple Object with 2 arrays:

{ 
"key1": ["a", "b", "c"],
"key2": [ "d", "e", "f"] 
}

in Javascript I'm using fetch to get the data. To use the data I'm pushing it into an array

const jsonData = '/things.json';
const myArray = [];

fetch(jsonData)
.then(answer => answer.json())
.then(data => myArray.push(data))

console.log(myArray); //this gives me a nested array

console.log(myArray[0]); //undefined 

putting myArray through a loop also gives me an //undefined

using the spread syntax or concat gives me //Found non-callable @@iterator

How can I get the content of that array?

Answer 1

As pointed by @Gavin , Your console.log statement should execute after fetch has completed. One of the ways to do that would be to add that in another then.

fetch(jsonData)
.then(answer => answer.json())
.then(data => myArray.push(data))
.then(() => console.log(myArray[0]));

Output:

Answer 2

After you receive the JSON data Simply use const array=Object.values(jsonData)

I meant

fetch(location).then((response)=>{
response.json().then((data)=>{
const array=Object.values(data)

Answer 3

What you need to do is this:

const jsonData = '/things.json';
const myArray = [];

fetch(jsonData)
.then(answer => answer.json())
.then(data => myArray.push(...data)) //Notice the spread operator

UPDATE Seems like spread operator is not working in your project you can do this too:

const jsonData = '/things.json';
const myArray = [];

fetch(jsonData)
.then(answer => answer.json())
.then(data => myArray = data);

For ... not to work on your projects, there could be various solutions, one of them being changing target in tsconfig to "target": "es5"