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

`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. — Rajeev Ranjan, Jul 02 '17 at 18:06
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. — RhodosCoder, Jul 02 '17 at 18:11
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) — trincot, Jul 02 '17 at 18:18
this is one of the JSON objects i get name:"Rodin" wiki:"http://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). — RhodosCoder, Jul 02 '17 at 18:26
update your question with the JSON object please. However I still do not really understand your question — Nicholas, Jul 02 '17 at 18:27
@trincot The question does not seem broad at all. He just wants to know the basics of using `fetch` to retrieve a JSON response. — , Jul 02 '17 at 18:41

score 2 · Answer 1 · 2017-07-02T18:55:58.037

2

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

edited Jul 02 '17 at 18:55

answered Jul 02 '17 at 18:37

json.name returns `undefined` – RhodosCoder Jul 02 '17 at 18:47
1

@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. – Rajeev Ranjan Jul 02 '17 at 18:50
torazaburo I do love that ES6 syntax :) – RhodosCoder Jul 02 '17 at 18:52
@RajeevRanjan SOLVED IT, thanks so much , off course I knew object notation but couldn't figure that out. – RhodosCoder Jul 02 '17 at 19:06

Rajeev Ranjan · Accepted Answer · 2017-07-02T18:48:16.163

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

};

score 0 · Answer 3 · answered Jul 02 '17 at 18:32

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

};

How can I format JSON output in javascript

3 Answers3