How can I format JSON output in javascript

Question

I have this function that fetches a JSON object.

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

How can I return the indices in the JSON object individually to use in HTML?

Like, my name (object.name) and my quote is (object.text) from this source (object.source).

• Rajeev Ranjan: JSON.parse and JSON.stringify can be used to covert between string and JSON formats. You can read the response.text() and then the specific attribute of interest.
• RhodosCoder: I've used both of those and I prefer JSON.parse(); but how do I extract that data for use in html, I've tried loops with no sucess, I get undefined.
• trincot: Your question is rather broad. Can you provide a concrete example of your data, and what exactly you want to have as a result happening in your HTML? (edit your question)
• RhodosCoder: this is one of the JSON objects i get name:"Rodin" wiki:"en.wikipedia.org/wiki/Rodin" proto : Object text : "Nothing is a waste of time if you use the experience wisely". I would like to retrieve it an maybe put it in a paragraph. This is a quote by (object.name) , (object.text).
• Nicholas: update your question with the JSON object please. However I still do not really understand your question

Answer 1

Use json() on the response. It returns a promise for the object.

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

More idiomatic:

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

• RhodosCoder: json.name returns undefined
• Rajeev Ranjan: @RhodosCoder , its because json.name is not an attribute. json.author.name is. Once you have the JSON, you can read properties from it like any other JSON.
• RhodosCoder: torazaburo I do love that ES6 syntax :)
• RhodosCoder: @RajeevRanjan SOLVED IT, thanks so much , off course I knew object notation but couldn't figure that out.

Answer 2

You can directly use the json() method of the Response object in this manner.

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 3

You can use response.json() to convert your response as JSON object. The response.json() method returns a promise. You will resolve promise you can get JSON object.

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