web-dev-qa-db-ja.com

フェッチしたJSONを変数に保存する

JSONを変数に保存しようとしていますが、ここではすべてを理解できていないようです。 JSONは一度好きな方法でコンソールに表示されますが、後でもう一度呼び出そうとすると、promiseのみが返されます。 JSONを変数に保存して、後でJSONでオブジェクトを使用するにはどうすればよいですか?

var jsondata = fetch(url).then(
    function(u){ return u.json();}
  ).then(
    function(json){
      console.log(json);
    }
  )
console.log(jsondata);
6
J Hightow

もう1つのオプションは、変数をグローバルスコープに公開しないように、コールバックをパラメーターとして使用することです。

function getFromAPI(url, callback){
  var obj;
  fetch(url)
    .then(res => res.json())
    .then(data => obj = data)
    .then(() => callback(obj))
 }

getFromAPI('https://jsonplaceholder.typicode.com/posts', getData);

function getData(arrOfObjs){
  var results = "";
  arrOfObjs.forEach( (x) => {
    results += "<p> Id: " + x.id + "<ul>"
    Object.keys(x).forEach( (p) => {
        results += "<li>" + (p + ": " + x[p]) + "</li>";
    });
    results += "</ul> </p> <hr>"
  })
  results += "";
  document.getElementById("myDiv").innerHTML = results;
}

http://jsfiddle.net/5gch2yzw/

0
Travis

次のコードのように、フェッチ関数の外に別の関数を作成してjsonデータを処理することができます。フェッチ関数は完全なjsonオブジェクトを「data_function」と呼ばれる別の関数に渡し、この「data_function」を通じてJSONオブジェクトを処理します。

//fetch function
fetch(url).then(
function(u){ return u.json();}
).then(
function(json){
data_function(json); //calling and passing json to another function data_function
}
)

//another functions
function data_function(data){
alert(data.length); 
}
0
A.Aleem11