JSONを変数に保存しようとしていますが、ここではすべてを理解できていないようです。 JSONは一度好きな方法でコンソールに表示されますが、後でもう一度呼び出そうとすると、promiseのみが返されます。 JSONを変数に保存して、後でJSONでオブジェクトを使用するにはどうすればよいですか?
var jsondata = fetch(url).then(
function(u){ return u.json();}
).then(
function(json){
console.log(json);
}
)
console.log(jsondata);
もう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;
}
次のコードのように、フェッチ関数の外に別の関数を作成して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);
}