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

Dispatching identification to controller after submission

Is it possible to set up VS Code's code completion feature to automatically accept punctuation suggestions?

Send a JSON object from an AngularJS application to an MVC controller

Highlighting the current menu item by comparing the URL and ID

Despite the presence of data within the array, the React array returns empty when examined using the inspect element tool

Python application for flattening and mapping nested JSON keys

Issue with Firefox compatibility in Backbone.js

Creating dynamic transformations and animations for characters and words within a paragraph in 3D

Please note: With React 18, the use of ReactDOM.render is no longer supported. Instead, we recommend using create

Can anyone recommend any offline editors for HTML, CSS, and JavaScript similar to JSFiddle, jsbin, or codepen?

Initiating PHP outcomes with the integration of JQUERY and Bootstrap

Extracting a subclass from an array

The jQuery Multiselect filter contradicts the functionality of single select feature

Positioning Images in Tailwind Modals

tilt and give motion to image within canvas

Discovering the Secrets of Accessing and Modifying Item Values in BIRT

AngularJS - Use promise instead of returning a data object

Having trouble retrieving the URL from JSON data - every time I attempt to access it, it just shows as undefined. Any suggestions

How can I resolve the "web page not found" error when using jQuery .replace()?

The import component path in Angular 4/TypeScript is not being recognized, even though it appears to be valid and functional