How can I read remote json file into local array of objects?

Question

json file on server ('url') to read looks like this:

[{"name":"Belles, Josh", "rate":"1238", "id":"30091457"}, 
 {"name":"Capwell, Thomas", "rate":"1956", "id":"16761815"}, 
 {"name":"Craddock, Justin", "rate":"1587", "id":"14498573"}
]

function newFile(out) {alert(out); myArray = JSON.parse(out);}
// ALERT JUST SHOWS: [object Object],[object Object],[object Object],[object Object],[object Object]

fetch(url)
    .then(res => res.json())
    .then((out) => {
        console.log('Output: ', out); // THIS WORKS
    myArray = out; //WORKS
    alert(myArray[1].name); //WORKS
    console.log (JSON.stringify(myArray)); //WORKS
}).catch(err => console.error(err));

But any reference to myArray outside of the fetch doesn't see myArray.

Like this no longer works:

alert(myArray[1].name);

How can I use myArray outside of the fetch ?

Qazi Abdurrehman · Accepted Answer · 2022-08-26 06:01:26Z

3

Your out is already in JSON format, you don't need to parse it again.
Just do myArray = out

EDIT

As the question is little modified(For accessing the result outside fetch) you need to understand that fetch is a promise and it will assign the value to myArray after it gets resolved. A solution(with a callback getDataCompleted) to this is to do your operation inside then like:

fetch(url)
    .then(res => res.json())
    .then((out) => {
        console.log('Output: ', out); // THIS WORKS
       //myArray = out; //WORKS
        getDataCompleted(out);
}).catch(err => console.error(err));

function getDataCompleted(arr){
 //do something with arr
}

If you use myArray before fetch gets completed, myArray will not contain your expected results.

edited Aug 26, 2022 at 6:01

answered Aug 26, 2022 at 5:27

Qazi Abdurrehman

1661 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

verlager Over a year ago

That's a good correction. But I can't access myArray outside of the fetch.

uingtea · Accepted Answer · 2022-08-26 06:45:04Z

1

fetch is asynchronous you need callback function to process the data later, but to get fetch result like synchronous, wrap your code in async block and use await

(async function() {

  function newFile(out) {
    console.log('title is: ', out.title)
  }
  
  let resp = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  let myArray = await resp.json()
  newFile(myArray)
})();

or use <script [src=] type="module"> for modern browser

<script type="module">
function newFile(out) {
  console.log('title is: ', out.title)
}

let resp = await fetch('https://jsonplaceholder.typicode.com/todos/1')
let myArray = await resp.json()
newFile(myArray)
</script>

answered Aug 26, 2022 at 6:45

uingtea

6,6342 gold badges32 silver badges45 bronze badges

Collectives™ on Stack Overflow

How can I read remote json file into local array of objects?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related