JavaScriptでJSON出力をフォーマットするには

Question

JSONオブジェクトをフェッチするこの関数があります。

function dataFetch(){ 
    const url = "http://www.quotzzy.co/api/quote?key=436587"; 

    fetch(url).then(function(response) { 
     return response.text(); 
    }).then(function(text) { 
     console.log('Request successful', text); 
    }).catch(function(error) { 
     log('Request failed', error) 
    }); 
}; 

JSONオブジェクトのインデックスを個別にHTMLで使用するにはどうすればよいですか？

などは、私の名前（object.name）と私の引用は、このソース（object.source）から（object.text）です。

Answer 1

このように、Responseオブジェクトのjson（）メソッドを直接使用できます。

function dataFetch(){ 
const url = "http://www.quotzzy.co/api/quote?key=436587"; 

fetch(url) 
.then(function(response) { 
if(response.status == 200){ 
    return response.json(); 
}) 
.then(function(responseObj) { 
var text = responseObj.text; 
var authorName = responseObj.author.name; 
var source = responseObj.author.wiki; 
...//access all attributes from the json 
...//assign them to HTML elements 
}) 
.catch(function(error) { 
log('Request failed', error) 
}); 

}; 

Answer 2

レスポンスをJSONオブジェクトとして変換するには、response.json（）を使用できます。 response.json（）メソッドは約束を返します。あなたはJSONオブジェクトを取得できることを約束します。

function dataFetch(){ 
const url = "http://www.quotzzy.co/api/quote?key=436587"; 

fetch(url) 
.then(function(response) { 
// return response.text(); // wrong 
return response.json(); // right 
}) 
.then(function(json) { 
console.log('Request successful', json); 
}) 
.catch(function(error) { 
log('Request failed', error) 
}); 

}; 

Answer 3

json()を応答に使用してください。オブジェクトの約束を返します。

function dataFetch(){ 
    const url = "http://www.quotzzy.co/api/quote?key=436587"; 

    fetch(url) 
    .then(function(response) { 
     return response.json(); 
    }) 
    .then(function(json) { 
     console.log(json.author.name); 
    }); 
    .catch(function(error) { 
    log('Request failed', error) 
    }); 
} 

より慣用：

function dataFetch(){ 
    const url = "http://www.quotzzy.co/api/quote?key=436587"; 

    fetch(url) 
    .then(response => response.json()) 
    .then(json => console.log(json.author.name, "said", json.text)) 
    .catch(error => log('Request failed', error)); 
}