Ways to dynamically update a div with data from a JSON response

Question

Ways to dynamically update a div with data from a JSON response

I'm currently in the process of developing a search platform. I have three static divs on the search results page that display certain content, all containing similar code.

For example:

<div id="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>

<div id="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>

<div id="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>

I am seeking guidance on how to dynamically loop through the contents of this div when a user clicks on a button:

<button id="search" class="btn" value="Search">

I want the contents in this div to be dynamic, negating the need for multiple static divs. How can I achieve this using JavaScript?

EDIT

I am now looking for a way to populate a div with children that match the data from the JSON response below, creating a dynamically loaded list:

[{
    "name": "Malkov Chicken",
    "location": "New York",
    "meals": 5,
    "close_time": 1567289876354
},
{
    "name": "Delicious Chops",
    "location": "San Francisco",
    "meals": 15,
    "close_time": 1567289876354
},
{
    "name": "Banana cultshop",
    "location": "New York",
    "meals": 8,
    "close_time": 1567289876354
}]

The div should populate with data from the JSON list and dynamically create div elements based on the number of responses received from the JSON. For instance, if there are 5 objects in the JSON response, there should be 5 corresponding divs created dynamically.

javascript jquery html css loops

Answer 1

Answer №1

If you have an array of objects in JSON format, here are the steps you can take:

Start by creating a string literal template
Utilize the `.map()` method to transform your JSON data into a function called `TPL_Results`
Combine the mapped results and insert them into the Document Object Model (DOM)

const restaurants = [{
    "name": "Malkov Chicken",
    "location": "New York",
    "meals": 5,
    "close_time": '23:30'
}, {
    "name": "Delicious Chops",
    "location": "San Francisco",
    "meals": 15,
    "close_time": '22:00'
}, {
    "name": "Banana Cultshop",
    "location": "New York",
    "meals": 8,
    "close_time": '23:00'
}];

const TPL_Results = item => `<div class="Results-item">
  <h3 class="Results-itemName">${item.name}</h3>
  <p class="Results-itemLocation"><b>${item.location}</b></p>
  <p class="Results-itemDetails">Meals: ${item.meals} Close time: ${item.close_time}</p>
</div>`;

document.querySelector("#results")
.innerHTML = restaurants.map(item => TPL_Results(item)).join('');

<div class="Results" id="results"></div>

Answer 2

If you have an array of objects in JSON format, here are the steps you can take:

Start by creating a string literal template
Utilize the `.map()` method to transform your JSON data into a function called `TPL_Results`
Combine the mapped results and insert them into the Document Object Model (DOM)

const restaurants = [{
    "name": "Malkov Chicken",
    "location": "New York",
    "meals": 5,
    "close_time": '23:30'
}, {
    "name": "Delicious Chops",
    "location": "San Francisco",
    "meals": 15,
    "close_time": '22:00'
}, {
    "name": "Banana Cultshop",
    "location": "New York",
    "meals": 8,
    "close_time": '23:00'
}];

const TPL_Results = item => `<div class="Results-item">
  <h3 class="Results-itemName">${item.name}</h3>
  <p class="Results-itemLocation"><b>${item.location}</b></p>
  <p class="Results-itemDetails">Meals: ${item.meals} Close time: ${item.close_time}</p>
</div>`;

document.querySelector("#results")
.innerHTML = restaurants.map(item => TPL_Results(item)).join('');

<div class="Results" id="results"></div>

Answer 3

Answer №2

If you are looking to dynamically add an HTML element on button click, it is important to remember that using a class is preferable over an id since ids must be unique within a document.

You can achieve this by following the example below:

var template = `<div class="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>`;
var occurrences = 3;
document.getElementById('search').addEventListener('click',
function(){
  var strHTML = '';
  for(var i=0; i<occurrences; i++){
    strHTML += template;
  }
  document.getElementById('container').insertAdjacentHTML('beforeend', strHTML);
});

<div id="container"></div>

<button id="search" class="btn" value="Search">Create</button>

Update:

var listArr = [{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": 1567289876354
},{
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": 1567289876354
},{
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": 1567289876354
}];
document.getElementById('search').addEventListener('click',
function(){
  var strHTML = '';
  listArr.forEach(function(item){
    strHTML += `<div class="Results-item">
            <h4 class="Results-itemName">${item.name}</h4>
            <p class="Results-itemLocation"><b>${item.location}</b></p>
            <p class="Results-itemDetails">Meals: ${item.meals} Close time: ${item.close_time}</p>
            </div>`;
  })
  document.getElementById('container').insertAdjacentHTML('beforeend', strHTML);
});

<div id="container"></div>
<button id="search" class="btn" value="Search">Create</button>

Answer 4

If you are looking to dynamically add an HTML element on button click, it is important to remember that using a class is preferable over an id since ids must be unique within a document.

You can achieve this by following the example below:

var template = `<div class="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>`;
var occurrences = 3;
document.getElementById('search').addEventListener('click',
function(){
  var strHTML = '';
  for(var i=0; i<occurrences; i++){
    strHTML += template;
  }
  document.getElementById('container').insertAdjacentHTML('beforeend', strHTML);
});

<div id="container"></div>

<button id="search" class="btn" value="Search">Create</button>

Update:

var listArr = [{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": 1567289876354
},{
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": 1567289876354
},{
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": 1567289876354
}];
document.getElementById('search').addEventListener('click',
function(){
  var strHTML = '';
  listArr.forEach(function(item){
    strHTML += `<div class="Results-item">
            <h4 class="Results-itemName">${item.name}</h4>
            <p class="Results-itemLocation"><b>${item.location}</b></p>
            <p class="Results-itemDetails">Meals: ${item.meals} Close time: ${item.close_time}</p>
            </div>`;
  })
  document.getElementById('container').insertAdjacentHTML('beforeend', strHTML);
});

<div id="container"></div>
<button id="search" class="btn" value="Search">Create</button>

Answer 5

Answer №3

If you want to add multiple cards with the same content, you can create a template for one card in JavaScript and then append several of these cards to a container div.

To add multiple divs with the same content upon button click, generate the string outside of the click event using a for loop, and then append the generated string.

In this example, the container div is named .content. Remember that each element should have a unique ID and IDs should not be repeated.

Check out the working example below:

let card = 
  `<div class="card">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4d5c5c4049015843594f4401454f43426c1e025c424b">[email protected]</a>?v=73d79a89bded" class="card_img" alt="result image">
    <h4>OFFLINE</h4>
    <p>Yes!!</p>
   </div>`;

let amount = 10; // number of cards to add on button click
let toAppend = '';
for (let i = 0; i < amount; i++) {
  toAppend += card;
}

$("#search").click(function() {
  $('.content').empty().append(toAppend);  
});

img {
  height: 150px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content"></div>
<button id="search" class="btn" value="Search">Click me</button>

In response to your revised question:

You can iterate through your data array using .reduce and build a string containing individual divs using template literals and destructuring. After that, you can append this constructed div to your body or a div (in this case it's appended to a div with the class content).

let data = [{
    "name": "Malkov Chicken",
    "location": "New York",
    "meals": 5,
    "close_time": 1567289876354
  },
  {
    "name": "Delicious Chops",
    "location": "San Francisco",
    "meals": 15,
    "close_time": 1567289876354
  },
  {
    "name": "Banana Cultshop",
    "location": "New York",
    "meals": 8,
    "close_time": 1567289876354
  }
];

let html = data.reduce((acc, {name, location, meals, close_time: close}) =>
      acc += `
      <div class='item'>
        <p>${name}</p>
        <p>${location}</p>
        <p>${meals}</p>
        <p>${close}</p>
      </div>`
, ``);

$('.content').append(html);

.item {
  border: 1px solid black;
  margin: 10px 0;
}
p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content"></div>

Answer 6

If you want to add multiple cards with the same content, you can create a template for one card in JavaScript and then append several of these cards to a container div.

To add multiple divs with the same content upon button click, generate the string outside of the click event using a for loop, and then append the generated string.

In this example, the container div is named .content. Remember that each element should have a unique ID and IDs should not be repeated.

Check out the working example below:

let card = 
  `<div class="card">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4d5c5c4049015843594f4401454f43426c1e025c424b">[email protected]</a>?v=73d79a89bded" class="card_img" alt="result image">
    <h4>OFFLINE</h4>
    <p>Yes!!</p>
   </div>`;

let amount = 10; // number of cards to add on button click
let toAppend = '';
for (let i = 0; i < amount; i++) {
  toAppend += card;
}

$("#search").click(function() {
  $('.content').empty().append(toAppend);  
});

img {
  height: 150px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content"></div>
<button id="search" class="btn" value="Search">Click me</button>

In response to your revised question:

You can iterate through your data array using .reduce and build a string containing individual divs using template literals and destructuring. After that, you can append this constructed div to your body or a div (in this case it's appended to a div with the class content).

let data = [{
    "name": "Malkov Chicken",
    "location": "New York",
    "meals": 5,
    "close_time": 1567289876354
  },
  {
    "name": "Delicious Chops",
    "location": "San Francisco",
    "meals": 15,
    "close_time": 1567289876354
  },
  {
    "name": "Banana Cultshop",
    "location": "New York",
    "meals": 8,
    "close_time": 1567289876354
  }
];

let html = data.reduce((acc, {name, location, meals, close_time: close}) =>
      acc += `
      <div class='item'>
        <p>${name}</p>
        <p>${location}</p>
        <p>${meals}</p>
        <p>${close}</p>
      </div>`
, ``);

$('.content').append(html);

.item {
  border: 1px solid black;
  margin: 10px 0;
}
p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content"></div>

Ways to dynamically update a div with data from a JSON response

Answer №1

Answer №2

Answer №3

Similar questions

There seems to be an issue with updating the ng-model properly in angular-ui-tinymce

What could be causing my code to fail in the useEffect hook every time I make updates to my JSON

While in Safari, there seems to be a random issue where the embedded image in an SVG becomes blank when using the Canvas API to convert it to

Swap out AJAX following a successful retrieval and when managing errors

I need guidance on how to successfully upload an image to Firebase storage with the Firebase Admin SDK

Upon rerender, React fails to refresh the style changes

Why isn't the jQuery colorbox popup appearing when triggered by the $.ajax() function?

Angular directive used to create a nested tree list

Struggling to Implement Middleware on Router in ExpressJS?

Node.js Sequelize QueryExplore the power of Sequelize in Node.js

Is anyone utilizing PHP variables to control the title of the HTML and the ID of the body element?

What methods can I use to prevent floated child divs from wrapping?

I recently realized that my website has a strong Björk influence when viewed in IE. Any suggestions for what I should do next

Enhanced Slider Display featuring Multiple Posts for Improved Performance

Changing the size of an image in an HTML5 canvas

Show data in a popup using jQuery DataTables and loading content asynchronously via Ajax

Utilizing Omit for the exclusion of nested properties within a TypeScript interface

What is the best way to implement momentJS globally in VueJS 2?

Can someone help me extract a specific portion and display the dimensions of the area?

To avoid any sudden movements on the page when adding elements to the DOM using jQuery, is there a way to prevent the page from