Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

use js fetch and .then to import this external json file into variable JavaScript

  • SOLVED

I have an external json file ('assets/cccr_mems.json'):

[
{ "Name": "Agok, Peter Panther", "cccrEXP": "" },
{ "Name": "Ahmed, Jamshed", "cccrEXP": "2018-10-10" },
{ "Name": "Attaya, James J", "cccrEXP": "2020-01-15" },
{ "Name": "Badamo, Anthony", "cccrEXP": "2019-11-14" },
{ "Name": "Bakht, Omar", "cccrEXP": "2019-03-06" },
{ "Name": "Birmingham, Gerald R", "cccrEXP": "2019-07-25" },
{ "Name": "Blazak, Stephen A", "cccrEXP": "2019-02-27" }
]

I import it with php:

<script>var cccr_mems = <?php include('assets/cccr_mems.json'); ?>;</script>


Instead, I want to use js fetch and .then to import this external json file into variable cccr_mems. I edit assets/cccr_mems.json by hand so if I have to remove the "[ ]" boundary chars, that's alright.

Answers (1)

2019-03-08

Rainner Lins answers:

Something like this. didn't test but should work. More info on fetch here:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch


// data placeholder
let cccr_mems = [];

// function used to handle data after it's fetched
const showData = function() {
console.log( cccr_mems );
}

// fetch and parse the data
fetch('assets/cccr_mems.json').then( response => {
return response.json();

}).then( data => {
cccr_mems = data;

// you will need to wait for this
// function to complete in order
// start using cccr_mems.
// Call other functions that
// depend on it here, for example...
showData();

}).catch( err => {
// in case of errors
console.error( err );
});


User180435 comments:

I pasted your code in at https://verlager.com and the console.log shows:

Array(97)
0: {Name: "Agok, Peter Panther", cccrEXP: ""}
1: {Name: "Ahmed, Jamshed", cccrEXP: "2018-10-10"}
2: {Name: "Attaya, James J", cccrEXP: "2020-01-15"}
3: {Name: "Badamo, Anthony", cccrEXP: "2019-11-14"}
4: {Name: "Bakht, Omar", cccrEXP: "2019-03-06"}
5: {Name: "Birmingham, Gerald R", cccrEXP: "2019-07-25"}
6: {Name: "Blazak, Stephen A", cccrEXP: "2019-02-27"}
7: {Name: "Brown, Chris", cccrEXP: "2019-10-02"}
8: {Name: "Burnside, Dan", cccrEXP: "2019-01-31"}
.... to 97 which is the correct number of records.

The problem is that the cccr_mems json isn't working.... It should fill in some of the tuple fields, but it doesn't. Please use chrome if you want to look at it.


User180435 comments:

Wait let me check it again!
You may be right.


Rainner Lins comments:

Well, that's because now you're fetching the data using javascript. This means the data comes in to the page later on, it's not being used by PHP anymore. You need to figure out how to apply the data to your page after it is loaded. May have to loop through the data and build the list after it's fetched.


User180435 comments:

The original works: https://verlager.com/original.php but the version with your code https://verlager.com doesn't work.


User180435 comments:

But isn't the json fetch data loaded and processed only as ready? I would really like a native fetch solution. But I would accept a jquery answer if that would work. I just want to avoid having reams of php included json code in my view source such as in https://verlager.com. It seems amateurish and unprofessional. What do you recommend, Mr. Lins?


Rainner Lins comments:

There's nothing wrong with the fetch function (which is what you asked), but you need to understand how it works. The data coming in using fetch is separate from the data that is loaded with your page.

Your code is running without the data before the data comes in. You need to wait for the data to come in, then run your code. Think of it as two tabs on your browser loading at the same time, which one is going to finish loading first? No way to know, so you need to wait for something to complete before moving on to the next thing.

You have way too much code there for me to make any sense of what you're trying to do. Hopefully this will make sense and you'll be able to re-organize it a bit to make use of the code I provided, or just stick with the injected JSON using PHP.

If you want to learn more about Asynchronous Programming, here's a good read:

https://eloquentjavascript.net/11_async.html