Get json data from url and put it into variable by JavaScript

Question

I have a JSON data in a URL, I want to get all JSON data from the URL by JavaScript (without jQuery) and put it into variable tags.

JSON Data:

 [
  {
    "uniq":"AXk2_U9l"
  },
  {
    "uniq":"AX0apLOG"
  },
  {
    "uniq":"AXrGmWk4"
  },
  {
    "uniq":"AXID1Psx"
  },
  {
    "uniq":"vovs2aPlj"
  }
]

And my JavaScript code, this code does not work:

async function get() {
  let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
  let obj = await (await fetch(url)).json();
  console.log(obj);
}
var tags = get();

if there is a new method, please show.

In what way does it not work?

Nick
– Nick

2019-05-04 05:49:33 +00:00
Commented May 4, 2019 at 5:49 — Nick
– Nick, Commented May 4, 2019 at 5:49
have you tried making get() return obj?

bloo
– bloo

2019-05-04 06:00:47 +00:00
Commented May 4, 2019 at 6:00 — bloo
– bloo, Commented May 4, 2019 at 6:00
It seem fine! How do you check it is working or not?

hoangdv
– hoangdv

2019-05-04 06:16:18 +00:00
Commented May 4, 2019 at 6:16 — hoangdv
– hoangdv, Commented May 4, 2019 at 6:16

Hien Nguyen · Accepted Answer · 2019-05-04 10:28:08Z

4

You need wrapped your code inside async/await pattern

In your code, you did not return anything.

  var tags;
    (async () => {
      tags = await get()
      console.log(tags)
      // handle the tags result here
    })()
    // if you try use tags here it will be undefined

async return result when it finish and next line of code run immediately so tags variable is undefined

async function get() {
    let url = 'https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json'
    let obj = await (await fetch(url)).json();
    
    //console.log(obj);
    return obj;
}
var tags;
(async () => {
  tags = await get()
  //console.log(tags)
  document.getElementById("tags").innerHTML = JSON.stringify(tags);
})()

<div id="tags"></div>

edited May 4, 2019 at 10:28

answered May 4, 2019 at 6:00

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

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

3 Comments

word Over a year ago

How can put it into external variable instead of console.log?

Hien Nguyen Over a year ago

I updated answer, you need handle your code inside async block, if you try using below it will be undefined, async return result when it finish and next line of code run immediately.

Hien Nguyen Over a year ago

ERR_CERT_DATE_INVALID may be the server deny to get data

Shijin TR · Accepted Answer · 2019-05-04 06:15:16Z

0

You can do it using XMLHttpRequest like as follows

function loadJson() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     var tags = JSON.parse(this.responseText);
     console.log(tags);
    }
  };
  xhttp.open("GET", "https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json", true);
  xhttp.send();
}
loadJson();

answered May 4, 2019 at 6:15

Shijin TR

7,80911 gold badges64 silver badges126 bronze badges

1 Comment

Shijin TR Over a year ago

Access to XMLHttpRequest at 'tarannom-baba.gigfa.com' from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. It need to allow access form aother server in tarannom-baba.gigfa.com

mplungjan · Accepted Answer · 2019-05-04 06:42:33Z

0

Your call is not resolved asynchronously so tags are empty

Here is the standard way to use fetch:

fetch('https://jsonware.com/json/abfe005c41c8214e22e487b8d6eff417.json')
  .then(
    response => {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    })
  .catch(err => console.log('Fetch Error :-S', err));

edited May 4, 2019 at 6:42

answered May 4, 2019 at 6:29

mplungjan

180k29 gold badges183 silver badges246 bronze badges

1 Comment

mplungjan Over a year ago

It is not HTTPS and if you call it from another server you need to enable CORS

Collectives™ on Stack Overflow

Get json data from url and put it into variable by JavaScript

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related