how to get json array from api

Question

I can not get the title in JavaScript from my API. I want to display the title in HTML.

api:(https://k0wa1un85b.execute-api.us-east-1.amazonaws.com/production/books)

JSON response looks like:

{"statusCode":200,"body":[{"id":"4f160b1f8693cdbeb96ac8be135ff0f9","title":"Harry Potter"}]}

javascript:

  <body>    
    <p>
        title: <span id="tit"></span><br/>
    </p>    
    <script>
        const api_url = 'https://k0wa1un85b.execute-api.us-east-1.amazonaws.com/production/books';
        async function getISS() {
            const response = await fetch(api_url);
            const data = await response.json();

             console.log(data);

            const {title} = (data);

            document.getElementById('tit').textContent = title;
        }
        getISS();
    </script>
  </body

const {title} = data.body[0];

Sumer
– Sumer

2019-12-19 05:45:19 +00:00
Commented Dec 19, 2019 at 5:45 — Sumer
– Sumer, Commented Dec 19, 2019 at 5:45

Pushprajsinh Chudasama · Accepted Answer · 2019-12-19 05:39:38Z

3

Use it like this.

const api_url = 'https://k0wa1un85b.execute-api.us-east-1.amazonaws.com/production/books';
        async function getISS() {
            const response = await fetch(api_url);
            const data = await response.json();

             console.log(data);

            const title = data.body[0].title;
            console.log(title)
            document.getElementById('tit').textContent = title;
        }
 getISS();

<p>
   title: <span id="tit"></span><br/>
</p>

answered Dec 19, 2019 at 5:39

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

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

Comments

Oshan Madusanka · Accepted Answer · 2019-12-19 05:39:04Z

1

Use dot notation to get data from json

async function getISS() {
      const response = await fetch(api_url);
      const data = await response.json();

      console.log(data);

      const title = data[0].title;

      document.getElementById('tit').textContent = title;
}

answered Dec 19, 2019 at 5:39

Oshan Madusanka

3373 silver badges9 bronze badges

Comments

Sahil Sharma · Accepted Answer · 2019-12-19 05:51:43Z

As suggested by other answers, you can get the value using the array index like this:

var response = {"statusCode":200,
"body":[{
"id":"4f160b1f8693cdbeb96ac8be135ff0f9",
"title":"Harry Potter"}]};
                
console.log(response.body[0].title);

var emptyResponse = {"statusCode":200,
"body":[]};
                
console.log(emptyResponse.body[0].title);

I just want to mention to include the null check otherwise it will through exception:

var response = {"statusCode":200,
"body":[{
"id":"4f160b1f8693cdbeb96ac8be135ff0f9",
"title":"Harry Potter"}]};
                
if(response.body.length){console.log(response.body[0].title);}

var emptyResponse = {"statusCode":200,
"body":[]};
                
if(emptyResponse.body.length){console.log(emptyResponse.body[0].title);}

Mohammad Ali Rony · Accepted Answer · 2019-12-19 05:41:26Z

0

try this

const api_url = 'https://k0wa1un85b.execute-api.us-east-1.amazonaws.com/production/books';
async function getISS() {
    const response = await fetch(api_url);
    const data = await response.json();
    const title = data.body[0]['title'];
    document.getElementById('tit').textContent = title;
}
getISS();

<p>
    title: <span id="tit"></span><br/>
</p>

answered Dec 19, 2019 at 5:41

Mohammad Ali Rony

4,9413 gold badges23 silver badges36 bronze badges

Collectives™ on Stack Overflow

how to get json array from api

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related