3

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.

3
  • In what way does it not work?
    – Nick
    Commented May 4, 2019 at 5:49
  • have you tried making get() return obj?
    – bloo
    Commented May 4, 2019 at 6:00
  • It seem fine! How do you check it is working or not?
    – hoangdv
    Commented May 4, 2019 at 6:16

3 Answers 3

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>

3
  • How can put it into external variable instead of console.log?
    –  word
    Commented May 4, 2019 at 10:17
  • 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. Commented May 4, 2019 at 10:29
  • ERR_CERT_DATE_INVALID may be the server deny to get data Commented May 4, 2019 at 15:30
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();

1
  • 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
    – Shijin TR
    Commented May 6, 2019 at 11:37
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));

1
  • It is not HTTPS and if you call it from another server you need to enable CORS
    – mplungjan
    Commented May 4, 2019 at 16:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.