Display JSON in HTML using jQuery

Hello everyone, I am wondering How can I display a JSON data into HTML using jQuery?

[
 { 
 "id": 3,
 "title": "Let’s narrow down your selection",
 "subtitle": "What services do you want to include in your selection?",
 "answers":[
 { "name": "Driver Profiling", "value": "0" },
 { "name": "Driver Assessment", "value": "1" },
 { "name": "Driver Training", "value": "2" },
 { "name": "Driver Management", "value": "3" },
 { "name": "Driver License check", "value": "4" }
 ]
 },
 { 
 "id": 4,
 "title": "We need to know a bit more about you now",
 "subtitle": "How many drivers do you want to include? ",
 "answers":[
 { "name": "1 to 9 Drivers", "value": 0 },
 { "name": "10 to 49 Drivers", "value": 1 },
 { "name": "50 to 249 Drivers", "value": 2 },
 { "name": "250 to 1000 Drivers", "value": 3 },
 { "name": "More than 1000 Drivers", "value": 4 }
 ]
 }
]

the HTML code which i have is like

<!DOCTYPE html>
<html>
 <head>
 <style>
 div.card { background-color: #f2f2f2; border-radius: 5px; margin-bottom: 20px; padding: 30px; }
 </style>
 </head>
 <body>
 <div id="myData">
 <div class="card">
 <h3>Ttile</h3>
 <h5>Subtitle</h5>
 <p>Answer 1</p>
 <p>Answer 2</p>
 <p>Answer 3</p>
 <p>Answer 4</p>
 <div>
 </div>
 </body>
</html>

Can anyone help please?

Mohamed Atef

30 Jan 2022

Best Answer

Welcome Back,
To insert these data using jquery to can do it easily please follow my leads

Create variable to store the JSON
Convert the data into JS arrays & objects
Use a loop function or for loop
You can add the data to the page using append()

the full code is

<!DOCTYPE html>
<html>
 <head>
 <style>
 div.card { background-color: #f2f2f2; border-radius: 5px; margin-bottom: 20px; padding: 30px; }
 </style>
 <script src="./jquery.js"></script>
 </head>
 <body>
 <div id="myData"></div>
 <script>
 jQuery(document).ready(($) => {
 //Create variable to store the JSON 
 var data = `[
 { 
 "id": 3,
 "title": "Lets narrow down your selection",
 "subtitle": "What services do you want to include in your selection?",
 "answers":[
 { "name": "Driver Profiling", "value": "0" },
 { "name": "Driver Assessment", "value": "1" },
 { "name": "Driver Training", "value": "2" },
 { "name": "Driver Management", "value": "3" },
 { "name": "Driver License check", "value": "4" }
 ]
 },
 { 
 "id": 4,
 "title": "We need to know a bit more about you now",
 "subtitle": "How many drivers do you want to include? ",
 "answers":[
 { "name": "1 to 9 Drivers", "value": 0 },
 { "name": "10 to 49 Drivers", "value": 1 },
 { "name": "50 to 249 Drivers", "value": 2 },
 { "name": "250 to 1000 Drivers", "value": 3 },
 { "name": "More than 1000 Drivers", "value": 4 }
 ]
 }
 ]`;
 //Convert the data into JS arrays & objects
 let readyData = JSON.parse(data);
 // Just for testing 
 console.log(readyData);
 //Use a loop function or for loop with append function inside it 
 let answers = '';
 readyData.map((obj) => {
 console.log(obj);
 let answers = '';
 obj.answers.map((answer) => {
 answers = answers +`<p>${answer.name}</p>`;
 });
 $("#myData").append(`
 <div class="card" id="${'card'+obj.id}">
 <h3>${obj.title}</h3>
 <h5>${obj.subtitle}</h5>
 ${answers}
 <div>
 `);
 });

 });
 </script>
 </body>
</html>

Note that you can download jquery3.6.0 from //code.jquery.com/jquery-3.6.0.min.js

let me know if there is any problem

Replies

Jo Micheal

30 Jan 2022

Thank you so much, this code works

Display JSON in HTML using jQuery

Comments

Replies