extracting a JSON array from an API

Question

extracting a JSON array from an API

I'm trying to extract the title from my API using JavaScript and then display it in HTML.

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

The JSON response is as follows:

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

This is the JavaScript code used:

  <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 getTitle() {
            const response = await fetch(api_url);
            const data = await response.json();

             console.log(data);

            const {title} = (data);

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

javascript json

Answer 1

Answer №1

Here is an example of how to use it.

const api_url = 'https://example-api-url/production/data';
        async function getData() {
            const response = await fetch(api_url);
            const data = await response.json();

             console.log(data);

            const info = data.items[0].info;
            console.log(info)
            document.getElementById('inf').textContent = info;
        }
 getData();

<p>
   information: <span id="inf"></span><br/>
</p>

Answer 2

Here is an example of how to use it.

const api_url = 'https://example-api-url/production/data';
        async function getData() {
            const response = await fetch(api_url);
            const data = await response.json();

             console.log(data);

            const info = data.items[0].info;
            console.log(info)
            document.getElementById('inf').textContent = info;
        }
 getData();

<p>
   information: <span id="inf"></span><br/>
</p>

Answer 3

Answer №2

Retrieve information from a JSON object using dot notation

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

      console.log(data);

      const title = data[0].title;

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

Answer 4

Retrieve information from a JSON object using dot notation

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

      console.log(data);

      const title = data[0].title;

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

Answer 5

Answer №3

One way to access the value is by using the array index as demonstrated below:

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

Remember to include a null check to avoid exceptions:

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

Answer 6

One way to access the value is by using the array index as demonstrated below:

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

Remember to include a null check to avoid exceptions:

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

Answer 7

Answer №4

Give this a shot

const api_url = 'https://74akys98h2.execute-api.us-west-2.amazonaws.com/production/books';
async function fetchData() {
    const response = await fetch(api_url);
    const data = await response.json();
    const title = data.body[0]['title'];
    document.getElementById('bookTitle').textContent = title;
}
fetchData();

<p>
    Book Title: <span id="bookTitle"></span><br/>
</p>

Answer 8

Give this a shot

const api_url = 'https://74akys98h2.execute-api.us-west-2.amazonaws.com/production/books';
async function fetchData() {
    const response = await fetch(api_url);
    const data = await response.json();
    const title = data.body[0]['title'];
    document.getElementById('bookTitle').textContent = title;
}
fetchData();

<p>
    Book Title: <span id="bookTitle"></span><br/>
</p>

extracting a JSON array from an API

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing Dynamic Passing of Link Element Value to a Function in jQuery

Encountering issues with resolving dependency tree post updating node, specifically with node-sass dependency causing failure

Accessing the app module in separate files is not possible for Angular and Coffeescript

What could be causing the header of the datatable to be out of alignment with the rest of

Is it possible to utilize a slot within a Vue.js loop?

A step-by-step guide to creating adorable rounded corners in a DIV element

Adjusting font size in dynamic containers relatively

JavaScript is incorrectly showing the array as empty despite containing strings

Save user sessions in a database using node.js, express, and mongoose-auth

An intriguing inquiry regarding HTML form intricacies

Optimizing Require.js File for Efficient Loading

Unable to transform a System.String into a Class object

Nest Java classes without considering their inner attributes

Adding a function to the Window in React & Next.js without using the onload event

Send a JSON payload to a REST API endpoint using an HTML file

Set up Vue.prototype prior to the component loading

The functionality of loading images with Jquery Ajax seems to only be working in Firefox. I have a feeling it may be due to a

Defining types for functions that retrieve values with a specified default

Implementing jQuery form validation including checking for the strength of the password

The response data from the API is filled with mysterious escape characters