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

Is there a way to set the background of the first sibling element to blue, but change it when another sibling element is hovered over?

Automated scrolling within a div when an li element overflows

Initialize React Native project

Unable to disable webpack HMR

The feature of Switch css does not appear to function properly when used in conjunction with input type

Struggling to make JavaScript read JSON data from an HTML file

Using jQuery Ajax to send data and retrieve responses in the Codeigniter framework

Unveiling and Shifting Among Concealed HTML Forms

Unusual perspective of JSON with ng-jsoneditor in AngularJS

Arrange ten objects in each of the four JavaScript arrays in ascending order based on a specific value

In Node.js, JavaScript, when using SQLite, the variables are inserted as Null

Fade in/out overlay effect when clicking on a content block

What is the most effective way to identify mobile browsers using javascript/jquery?

I am looking to efficiently store various pieces of data in a database by utilizing a singular variable through JS, PHP, and AJAX for streamlined processing and management

jqGrid is failing to display basic JSON data properly

CSS Flexibility in Action

In the realm of numeric input in JavaScript (using jQuery), it is interesting to note that the keyCode values for '3' and '#' are identical

Generate an HTML webpage with dynamic content using MySQL

The onClick function for the "div" element is failing to append

The process of combining a CssStyleCollection with a System.Web.UI.WebControls.Style