Show data from an API in an HTML table

Question

Show data from an API in an HTML table

I encountered an issue with an API, and despite trying

console.log(response.[""0""].body

) to view the response in the console, it does not seem to be working. My goal is to extract all the data from the API and display it in a table.

Below is my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    // JavaScript Code
    
    var root = 'https://jsonplaceholder.typicode.com';
    $.ajax({
        url: root + '/posts',
        method: 'GET',
        success: function(response) {
            console.log(response);
        }
    });

    var body = document.getElementsByTagName('body')[0];
    var table = document.createElement('table');
    body.appendChild(table);
    table.setAttribute('id', 'mytable');

    var createRow = function(cell1, cell2) {
        var row = document.createElement('tr');
        row.appendChild(cell1);
        row.setAttribute('class', 'row');
        row.appendChild(cell2); 

        return row;
    }

    var createCell = function(value) {
        var cell = document.createElement('td');
        cell.setAttribute('class', 'cell');
        cell.innerText = value;
        return cell;
    }

    table.appendChild(createRow(createCell('Mihaela'), createCell('11')))
</script>

javascript ajax

Answer 1

Answer №1

To demonstrate the power of the new Fetch API, I have created a sample using vanilla JavaScript without any external dependencies.

const root = 'https://jsonplaceholder.typicode.com';

const asyncFetchPosts = async() => (
  fetch(`${root}/posts`)
  .then(res => res.json())
);


const start = async() => {
  const posts = await asyncFetchPosts();
  const tableHead = document.getElementById('myTableHead');
  const tableBody = document.getElementById('myTableBody');
  
  // Extract all property keys from the first post
  // Array: [userId, id,title,body]
  const keys = Object.keys(posts[0]);

  // Add table header row
  const tableHeadRow = tableHead.insertRow(tableHead.rows.length);

  // Iterate over keys to generate the header
  keys.forEach((key, i) => {    
    const newCell = tableHeadRow.insertCell(i);
    const newText = document.createTextNode(key);
    newCell.appendChild(newText);
  });
  
  // Loop through all posts
  posts.forEach(post => {
    const newRow = tableBody.insertRow(tableBody.rows.length);
    
    // Now loop through the keys for each post
    keys.forEach((key, i) => {
      const newCell = newRow.insertCell(i);
      const newText = document.createTextNode(post[key]);
      newCell.appendChild(newText);
    })
  });
}

// Call the start function
start();

<table id="myTable" border="1">
  <thead id="myTableHead">
  </thead>
  <tbody id="myTableBody">
  </tbody>
</table>

Answer 2

To demonstrate the power of the new Fetch API, I have created a sample using vanilla JavaScript without any external dependencies.

const root = 'https://jsonplaceholder.typicode.com';

const asyncFetchPosts = async() => (
  fetch(`${root}/posts`)
  .then(res => res.json())
);


const start = async() => {
  const posts = await asyncFetchPosts();
  const tableHead = document.getElementById('myTableHead');
  const tableBody = document.getElementById('myTableBody');
  
  // Extract all property keys from the first post
  // Array: [userId, id,title,body]
  const keys = Object.keys(posts[0]);

  // Add table header row
  const tableHeadRow = tableHead.insertRow(tableHead.rows.length);

  // Iterate over keys to generate the header
  keys.forEach((key, i) => {    
    const newCell = tableHeadRow.insertCell(i);
    const newText = document.createTextNode(key);
    newCell.appendChild(newText);
  });
  
  // Loop through all posts
  posts.forEach(post => {
    const newRow = tableBody.insertRow(tableBody.rows.length);
    
    // Now loop through the keys for each post
    keys.forEach((key, i) => {
      const newCell = newRow.insertCell(i);
      const newText = document.createTextNode(post[key]);
      newCell.appendChild(newText);
    })
  });
}

// Call the start function
start();

<table id="myTable" border="1">
  <thead id="myTableHead">
  </thead>
  <tbody id="myTableBody">
  </tbody>
</table>

Answer 3

Answer №2

One troubleshooting tip is to utilize console.log(response[0].body)

Answer 4

One troubleshooting tip is to utilize console.log(response[0].body)

Show data from an API in an HTML table

Answer №1

Answer №2

Similar questions

What could be causing the lack of value appearing after I clicked the button?

Is the error message "not a function" appearing when calling a function from a parent to a child?

Is there any issue that you can spot with this js / jQuery code?

Javascript Promise: managing the flow of execution

The combination of Nest, Fastify, Fastify-next, and TypeOrm is unable to locate the next() function

What methods can a Discord Bot use to respond with specific messages to individual users?

Showing ng-attributes in haml partials in Rails using jQuery ajax and $q

Updating the handler function for AutoComplete with Checkbox in Material UI using React JS

Transfer an Array of Objects containing images to a POST API using Angular

Develop a custom dropdown menu using JavaScript

What is the best way to incorporate an AJAX GET request into an HTML element?

Exploring Nested Data in MongoDB Aggregation using $match and $project

Tips for improving the performance of the JavaScript code mentioned

Is there a way to access the rear camera on a mobile device using webcam.js?

Firebase Firestore replicates documents, subcollections, and data

Assign a value to the cookie based on the input from the form

Is there a way to use flexbox in a grid to center only a specific tab from MUI?

Vuejs Error: The 'in' operator cannot be used for searching

Leveraging JSON Data in Highcharts

I have my doubts about whether I am implementing the recapcha API correctly in a React application