user image

Jo Micheal
Published in : 2022-01-30

Display JSON in HTML using jQuery

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 > <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?

Comments

Mohamed Atef Date : 2022-01-30

Best answers

51

Best answers

51

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

  1. Create variable to store the JSON 
  2. Convert the data into JS arrays & objects
  3. Use a loop function or for loop 
  4. 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 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

Jo Micheal Date : 2022-01-30

Thank you so much, this code works 

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

jQuery Selector is not working .click
Publish date: 2022-02-21 | Comments: 1

Tag: jQuery

Accessing Radio button values using Jquery
Publish date: 2022-03-05 | Comments: 1

Tag: jQuery

jQuery alter the class of a button when I click on it?
Publish date: 2022-02-12 | Comments: 1

Tag: jQuery

How to use !important using jQuery css function?
Publish date: 2022-01-27 | Comments: 2

Tag: jQuery

How to get the style of element in jQuery? add it to another
Publish date: 2022-01-27 | Comments: 2

Tag: jQuery

[solved] SyntaxError: Unexpected token o in JSON at position 1 jQuery
Publish date: 2022-01-30 | Comments: 2

Tag: jQuery

[SOLVED] jQuery .click() not working with auto added buttons
Publish date: 2021-06-19 | Comments: 2

Tag: jQuery