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

46

Best answers

46

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 https://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 .resizable(): How to return to original size after clicking the button?
Publish date: 2022-02-23 | Comments: 1

Tag: jQuery

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

Tag: jQuery

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

Tag: jQuery

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

Tag: jQuery

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

Tag: jQuery

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

Tag: jQuery

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

Tag: jQuery

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

Tag: jQuery