Display JSON data into HTML with jQuery

Question

I wanted a simple way to display text and author into HTML like this:

text: You can observe a lot just by watching
author: Yogi Berra

Here, I tried to do it with jQuery and it's returning blank on the screen and undefined when logged out unless I removed text from (data.text).

$.ajax({
  url: "https://type.fit/api/quotes",
  method: "GET"
}).then(function(data) {
  $("#text").text(data.text);
  $("#author").text(data.author);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="text"></p>
  <p id="author"></p>
</div>

What am I missing here?

You missed JSON.parse() before.

pavel
– pavel

2021-02-10 09:09:43 +00:00
Commented Feb 10, 2021 at 9:09 — pavel
– pavel, Commented Feb 10, 2021 at 9:09
data is json so array so you need to use loop

Ravi Ashara
– Ravi Ashara

2021-02-10 09:13:27 +00:00
Commented Feb 10, 2021 at 9:13 — Ravi Ashara
– Ravi Ashara, Commented Feb 10, 2021 at 9:13

sbgib · Accepted Answer · 2021-02-10 09:13:27Z

4

The data is in JSON format, so it needs to be parsed. It is also an array, so the 2nd element needs to be selected to display the chosen text:

$.ajax({
  url: "https://type.fit/api/quotes",
  method: "GET"
}).then(function(data) {
  data = JSON.parse(data);
  
  $("#text").text(data[1].text);
  $("#author").text(data[1].author);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="text"></p>
  <p id="author"></p>
</div>

answered Feb 10, 2021 at 9:13

sbgib

5,8583 gold badges22 silver badges27 bronze badges

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

Comments

Abhishek Pandey · Accepted Answer · 2021-02-10 09:22:23Z

1

Data is retuning in string form, in order to make it JSON, you need to parse data
The data is array of object so you cannot access it by using data.text until you use loop or manually pick the index you want to display.

$.ajax({
  url: "https://type.fit/api/quotes",
  method: "GET"
}).then(function(data) {
  data = JSON.parse(data);            // Added this code
  $("#text").text(data[0].text);      // Updated
  $("#author").text(data[0].author);  // Updated
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="text"></p>
  <p id="author"></p>
</div>

Bonus: If you want to display all the data from the JSON, printing it in a single element with ID is not the best way to do it, use loop and dynamic DOM creation

edited Feb 10, 2021 at 9:22

answered Feb 10, 2021 at 9:14

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

Comments

Mugentoki · Accepted Answer · 2021-02-10 09:31:11Z

1

If you do a console.log(data) inside your .then, you will see the data is coming as a stringified JSON.

So before using Data, you have to JSON.parse(data) your data back into JSON itself.

const parsedData = JSON.parse(data);

Then you will run into another problem, as the data does not contain a single Element. It's an array. So either select a specific element from it, or loop over it.

$.ajax({
  url: "https://type.fit/api/quotes",
  method: "GET"
}).then(function(data) {
  const parsedData = JSON.parse(data);
 
  console.log(parsedData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Feb 10, 2021 at 9:31

answered Feb 10, 2021 at 9:17

Mugentoki

1,6461 gold badge14 silver badges25 bronze badges

2 Comments

Abhishek Pandey Over a year ago

"...your .then, you will see the data is coming in JSON format." if it's coming in JSON format then why there is a need to parse it?

Mugentoki Over a year ago

@AbhishekPandey changed the description. Hope it's okay now

Collectives™ on Stack Overflow

Display JSON data into HTML with jQuery

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related