Displaying Previously Fetched Results in JavaScript

When building web applications, it's often necessary to display data that has been fetched from an API or database. This data can be stored in variables and displayed on the page using JavaScript. In this blog post, we'll explore how to show previously fetched results in JavaScript.

Fetching Data

Before we can display the fetched data, we need to fetch it from an API or database. We can use the fetch() function in JavaScript to make an HTTP request and retrieve data. Here's an example:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // Store the fetched data in a variable
    const fetchedData = data;
    
    // Display the fetched data on the page
    displayResults(fetchedData);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

In this example, we use the fetch() function to make a GET request to the specified URL. The then() method is used to handle the response from the API. We first convert the response to JSON format using response.json(), and then we can access the fetched data in the second then() block.We store the fetched data in a variable called fetchedData and pass it to a function called displayResults() to display the results on the page.

Displaying the Fetched Results

To display the fetched results on the page, we need to create a function that takes the fetched data as an argument and generates HTML elements to represent each item in the data. Here's an example:

function displayResults(data) {
  // Get a reference to the container element where we'll display the results
  const resultsContainer = document.getElementById('results-container');
  
  // Clear any existing results
  resultsContainer.innerHTML = '';
  
  // Loop through the fetched data and create HTML elements for each item
  data.forEach(item => {
    // Create a new div element for each item
    const itemElement = document.createElement('div');
    itemElement.classList.add('result-item');
    
    // Create elements for each property of the item
    const titleElement = document.createElement('h3');
    titleElement.textContent = item.title;
    
    const descriptionElement = document.createElement('p');
    descriptionElement.textContent = item.description;
    
    // Append the elements to the item element
    itemElement.appendChild(titleElement);
    itemElement.appendChild(descriptionElement);
    
    // Append the item element to the results container
    resultsContainer.appendChild(itemElement);
  });
}

Displaying Previously Fetched Results

To display previously fetched results, we can simply call thedisplayResults()function with the previously fetched data. Here's an example:

// Assuming we have previously fetched data stored in a variable
const previouslyFetchedData = [
  { title: 'Result 1', description: 'This is the first result.' },
  { title: 'Result 2', description: 'This is the second result.' },
  { title: 'Result 3', description: 'This is the third result.' }
];

// Display the previously fetched results
displayResults(previouslyFetchedData);

In this example, we assume that we have previously fetched data stored in a variable called previouslyFetchedData. We then simply call the displayResults() function and pass the previously fetched data as an argument.The displayResults() function will then generate the necessary HTML elements to display each item in the data on the page.

Conclusion

Displaying previously fetched results in JavaScript is a common task when building web applications. By using the fetch() function to fetch data from an API or database and storing the fetched data in variables, we can easily display the results on the page using JavaScript.Remember to clear any existing results before displaying the new ones to avoid duplicates or overlapping content. With the techniques covered in this blog post, you should be able to effectively display previously fetched results in your JavaScript applications.