Display JSON data in HTML page | Example code

  • by

You have to use JavaScript to Display JSON data on the HTML page. First, convert the json from long string to acutely js object. you doing so by the JSON.parse command. like so:

let jsObj = JSON.parse(youreJsonString);

Them, you can loop throw your products in your product list and build your html code, like so:

var cartItemsList = document.getElementById("cartItemsList");

      obj.basket.productList.forEach(function(element) {
        cartItemsList.insertAdjacentHTML( 'beforeend',"<li>" + element.product.name + " : " + element.price+ " </li>");
      });

Source: stackoverflow.com

Display JSON data in HTML page

Simple HTML example code of shopping cart, where access and display everything in the product list.

 <!DOCTYPE html>
 <html>
 <body>

  <h2>Cart Items</h2>
  <ul id="cartItemsList">
   
    <script>
      var obj = { 
        "basket": {
          "productList": [{
            "product": {
              "id": "111",
              "name": "Dog",
              "shortDescription": "<p>Mans best friend</p>",
              "category": "Canine",
              "availability": "In Stock",
              "variationType": {
                "name": "Breed",
                "value": "Collie"
              }
            },
            "quantity": 1,
            "price": "$53.00"
          }, {
            "product": {
              "id": "112",
              "name": "Dog",
              "shortDescription": "<p>Not so best friend</p>",
              "category": "feline",
              "availability": "Low In Stock",
              "variationType": {
                "name": "breed",
                "value": "Maine Coon"
              }
            },
            "quantity": 1,
            "price": "$49.00"
          }, {
            "product": {
              "id": "113",
              "name": "Rabbit",
              "shortDescription": "Likes carrots",
              "category": "cuniculus",
              "availability": "In Stock"
            },
            "quantity": 1,
            "price": "$66.00"
          }]
        }
      }

      var cartItemsList = document.getElementById("cartItemsList");

      obj.basket.productList.forEach(function(element) {
        cartItemsList.insertAdjacentHTML( 'beforeend',"<li>" + element.product.name + " : " + element.price+ " </li>");
      });
    </script>

  </body>
  </html> 

Output:

Display JSON data in HTML page

How to display JSON data in a div when JSON data is in Array?

Answer: You can use for it to loop thru the array and construct an HTML string. Use jQuery‘s .append() to add the string to the body.

Another option is using map to loop thru the array and use Template literals to construct the HTML

 <!DOCTYPE html>
 <html>
 <head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <style type="text/css">
     .div-conatiner {
      background-color: #eeeeee;
      margin-bottom: 5px;
      padding: 5px;
    }

    .div-conatiner p {
      margin: 0px;
    }
  </style>
</head>

<body>

  <script>
    var data = [{
      "name": "Rehan",
      "location": "Pune",
      "description": "hello hi",
      "created_by": 13692,
      "users_name": "xyz",
    },
    {
      "name": "Sameer",
      "location": "Bangalore",
      "description": "how are you",
      "created_by": 13543,
      "users_name": "abc",
    },
    ]

    var htmlText = data.map(function(o){
      return `
      <div class="div-conatiner">
      <p class="p-name"> Name: ${o.name}</p>
      <p class="p-loc"> Location: ${o.location}</p>
      <p class="p-desc"> Description: ${o.description}</p>
      <p class="p-created"> Created by: ${o.created_by}</p>
      <p class="p-uname"> Username: ${o.users_name}</p>
      </div>
      `;
    });

    $('body').append(htmlText);
  </script>

</body>
</html> 

Output:

display JSON data in a div when JSON data is in Array

Do comment if you have any doubts or suggestions on this JS JSON topic.

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.