从url获取json数据,并通过JavaScript将其放入变量中

时间:2019-05-04 05:42:30

标签: javascript arrays json

我在URL中有一个JSON数据,我想通过JavaScript(不使用jQuery)从URL中获取所有JSON数据,并将其放入变量tags中。

JSON数据:

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

还有我的JavaScript代码,该代码不起作用:

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

如果有新方法,请显示。

3 个答案:

答案 0 :(得分:2)

您需要将代码包装在异步/等待模式中

在您的代码中,您什么也没有返回。

  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返回结果,完成后立即运行下一行代码,因此标签变量为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>

答案 1 :(得分:0)

您可以使用XMLHttpRequest进行如下操作

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();

答案 2 :(得分:0)

您的呼叫无法异步解决,因此标签为空

这是使用提取的标准方法:

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));