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
– Rajeev Ranjan, Commented Jul 2, 2017 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
– RhodosCoder, Commented Jul 2, 2017 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
– trincot, Commented Jul 2, 2017 at 18:18
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). — RhodosCoder
– RhodosCoder, Commented Jul 2, 2017 at 18:26
update your question with the JSON object please. However I still do not really understand your question — Nicholas
– Nicholas, Commented Jul 2, 2017 at 18:27

score 2 · Accepted Answer · 2017-07-02 18:55:58Z

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 2, 2017 at 18:55

answered Jul 2, 2017 at 18:37

user663031

Sign up to request clarification or add additional context in comments.

4 Comments

RhodosCoder Over a year ago

json.name returns undefined

Rajeev Ranjan Over a year ago

@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 Over a year ago

torazaburo I do love that ES6 syntax :)

RhodosCoder Over a year ago

@RajeevRanjan SOLVED IT, thanks so much , off course I knew object notation but couldn't figure that out.

Rajeev Ranjan · Accepted Answer · 2017-07-02 18:48:16Z

1

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

};

edited Jul 2, 2017 at 18:48

answered Jul 2, 2017 at 18:30

Rajeev Ranjan

4,1767 gold badges33 silver badges58 bronze badges

Comments

Vasi · Accepted Answer · 2017-07-02 18:32:47Z

0

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

};

answered Jul 2, 2017 at 18:32

Vasi

1,2271 gold badge10 silver badges18 bronze badges

Collectives™ on Stack Overflow

How can I format JSON output in javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related