Using Fetch API to Display Product Data and Reviews

1. Getting Started with Fetch API

Yes! You’re right that you need to make a GET request to fetch data. Here’s a simple way to do that:

fetch('YOUR_API_URL')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // Process the data here
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

2. Processing the JSON Response

Once you have the data as JSON, you can loop through it to extract the fields you need. For example:

data.products.forEach(product => {
    console.log(product.name); // Adjust field name to your API response
  });

3. Creating Tables Dynamically

You can create the tables entirely with JavaScript! Start by fetching the data and then build your table structures and fill them dynamically. Here’s a basic example:

const createTable = (data) => {
    const table = document.createElement('table');
    const headerRow = table.insertRow();
    const headers = Object.keys(data[0]); // Assuming data has objects

    headers.forEach(header => {
      const th = document.createElement('th');
      th.innerText = header;
      headerRow.appendChild(th);
    });

    data.forEach(item => {
      const row = table.insertRow();
      headers.forEach(header => {
        const cell = row.insertCell();
        cell.innerText = item[header];
      });
    });

    document.body.appendChild(table);
  };

4. Avoiding Errors and Duplicates

To handle errors gracefully, always check if the response is OK and handle any potential formatting issues. You can use default values if the expected fields are missing.

if (product.name) {
    console.log(product.name);
  } else {
    console.log('Product name not found');
  }

5. Example Putting It All Together

fetch('YOUR_API_URL')
    .then(response => {
      if (!response.ok) throw new Error('Network response was not ok');
      return response.json();
    })
    .then(data => {
      createTable(data.products); // Assuming products is an array
      createTable(data.reviews); // Assuming reviews is another array
    })
    .catch(error => {
      console.error('There has been a problem with your fetch operation:', error);
    });

Now you can combine everything! Just replace ‘YOUR_API_URL’ with the actual API endpoint you’re using, and you’re good to go!