Generate div elements dynamically for each object being populated in JSON using JavaScript

Question

Generate div elements dynamically for each object being populated in JSON using JavaScript

I have a main container that displays a list of JSON objects. Each object should be displayed as a separate DIV element with specific details, one after the other.

Additionally, I have a comments section on a webpage where the details are stored in JSON format as {author, id, comments, time}. I am looking to extract all the comments for a particular page and display them within a single DIV. Each comment will be represented as a child Div (showing the author's name, comment content, and timestamp) inside a parent DIV.

javascript json

Answer 1

Answer №1

HTML Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!--<script src="app1.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

</head>

<body> 
  <div id="placeholder1"></div>
  <div id="placeholder2"></div>
  <script>
    var data={
      "firstName":"Ray",
      "lastName":"Villalobos",
      "joined":2012
    };

    var data1={
      "firstName":"John",
      "lastName":"Doe",
      "joined":2013
    };
    document.getElementById("placeholder1").innerHTML=data.firstName+" "+data.lastName+" "+data.joined;
    document.getElementById("placeholder2").innerHTML=data1.firstName+" "+data1.lastName+" "+data1.joined;
  </script>

</body>
</html>

Answer 2

HTML Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!--<script src="app1.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

</head>

<body> 
  <div id="placeholder1"></div>
  <div id="placeholder2"></div>
  <script>
    var data={
      "firstName":"Ray",
      "lastName":"Villalobos",
      "joined":2012
    };

    var data1={
      "firstName":"John",
      "lastName":"Doe",
      "joined":2013
    };
    document.getElementById("placeholder1").innerHTML=data.firstName+" "+data.lastName+" "+data.joined;
    document.getElementById("placeholder2").innerHTML=data1.firstName+" "+data1.lastName+" "+data1.joined;
  </script>

</body>
</html>

Answer 3

Answer №2

One of the challenges lies in locating a sufficiently large DIV to accommodate all the data. Most DIVs are of standard size and therefore not suitable for this specific application. ;)

The following code snippet retrieves Yahoo weather information, converts the key-value pairs into text, and presents each piece within a distinct DIV contained in the LARGE DIV.

update: Slightly adjusted according to the new requirements from the original poster.

Execute the code snippet to observe it in action:

<html>
<body>
 <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'> 
<style type="text/css">
div {padding: 4px;border: 1px red dotted;font-family: monospace;font-size: 10px;}
    h2 {font-family: 'Permanent Marker', cursive; font-size:24px; color:steelblue;}
</style>
<h2>A REALLY SUPER BIG DIV WITH DATA</h2>
<div id="BIG_DIV"></div>
<script type="text/javascript">

function callback(data) {
document.getElementById('BIG_DIV').innerHTML = getKeys( data );
}

function getKeys( obj ) {
var key, html='';
for( key in obj) {
if (typeof obj[key] == 'object') html += '<div>' + getKeys( obj[key] ) + '</div>';
else html += '<div>' + key + ':' + obj[key] + '</div>';
}
return html;
}

</script>
<!-- Yahoo Weather data -->
<script type="text/javascript" src='https://query.yahooapis.com/v1/public/yql?q=select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="Paris")&format=json&callback=callback'></script>
</body>
</html>

Answer 4

One of the challenges lies in locating a sufficiently large DIV to accommodate all the data. Most DIVs are of standard size and therefore not suitable for this specific application. ;)

The following code snippet retrieves Yahoo weather information, converts the key-value pairs into text, and presents each piece within a distinct DIV contained in the LARGE DIV.

update: Slightly adjusted according to the new requirements from the original poster.

Execute the code snippet to observe it in action:

<html>
<body>
 <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'> 
<style type="text/css">
div {padding: 4px;border: 1px red dotted;font-family: monospace;font-size: 10px;}
    h2 {font-family: 'Permanent Marker', cursive; font-size:24px; color:steelblue;}
</style>
<h2>A REALLY SUPER BIG DIV WITH DATA</h2>
<div id="BIG_DIV"></div>
<script type="text/javascript">

function callback(data) {
document.getElementById('BIG_DIV').innerHTML = getKeys( data );
}

function getKeys( obj ) {
var key, html='';
for( key in obj) {
if (typeof obj[key] == 'object') html += '<div>' + getKeys( obj[key] ) + '</div>';
else html += '<div>' + key + ':' + obj[key] + '</div>';
}
return html;
}

</script>
<!-- Yahoo Weather data -->
<script type="text/javascript" src='https://query.yahooapis.com/v1/public/yql?q=select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="Paris")&format=json&callback=callback'></script>
</body>
</html>

Generate div elements dynamically for each object being populated in JSON using JavaScript

Answer №1

Answer №2

Similar questions

Ways to retrieve a specific attribute within a detailed JSON reply

Clicking two times changes the background

Creating multiple asynchronous calls within a loop in JavaScript

Having trouble retrieving text from an HTML form in Node.js using express, as the req.body object is coming up

The Next.js app's API router has the ability to parse the incoming request body for post requests, however, it does not have the

Tips for concealing the bar graph while maintaining the visibility of the data labels in HighCharts

Suggestions for relocating this function call from my HTML code

Implementing a function in jQuery to create a "Check All" and "Uncheck All" button

What are the best scenarios for implementing anonymous JavaScript functions?

The persistent connection of Socket.io results in consecutive connections while disregarding other occurring events

What is the best way to transform a UTC/GMT date and time into CST in Javascript? (CST specifically, not based on

Executing a function on page load instead of waiting for user clicks

What is the best way to create a JSON array in Grails as described below?

What is the best way to determine the width of a CSS-styled div element?

How can I extract data from a unique JSON object using .Net?

Determine the file format using fs module in Node.js

Can you explain the technical distinctions between Express, HTTP, and Connect?

Angular: Exploring the differences between $rootScope variable and event handling

VueJS and Vite: Encountering an unexpected character '�' while attempting to import files that are not JavaScript. Keep in mind that plugins are required for importing such files

Set the key for all elements in a sibling array to be the same key