javascript - learn to convert a json object into a java script and show output in HTML -


i need learn convert json object javascript. in below json there 2 columns, how iterate both columns. kindly me out.

{      "hotels": {          "1":{"name": "taj residency","description":" sample description of taj" },      "2":{"name": "gulf zone","description":" sample description of gulf zone"},      "3":{"name": "silver resort","description":" sample description of silver resort"},      "4":{"name": "burj al arab","description":" sample description of burj al arab "},      "5":{"name": "raffles dubai","description":" sample description of raffles dubai"},      "6":{"name": "dubai heights","description":" sample description of dubai heights"},      "7":{"name": "classic tower","description":" sample description of classic tower"},      "8":{"name": "royal","description":" sample description of royal"},      "9":{"name": "al arab residency","description":" sample description of al arab residency"}      },  "location": {      "1":{"name": "dubai" },  "2":{"name": "sharjah"},  "3":{"name": "abu dhabi"},  "4":{"name": "mumbai"}  }  } 

i able watch output on console of browser, unable show on browser.

please check below code.

<html> <head>     <title>assi</title>     <meta charset="utf-8" />     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>     <script>         $(document).ready(function () {             $.ajax({                 type: 'get',                 url: 'json.json',                 data: '',                 datatype: 'json',                 success: function (response) {                      console.log(response);                  }             });         })     </script>  </head> <body>   </body> </html> 

you can try code show on browser

<html> <head>     <title>assi</title>     <meta charset="utf-8" />     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>     <script>         $(document).ready(function () {             $.ajax({                 type: 'get',                 url: 'json.json',                 data: '',                 datatype: 'json',                 success: function (data) {                      //console.log(data); $('div.hotels').append('<div></div>').append("<h3>hotels</h3>");         $('div.locations').append('<div></div>').append("<h3>locations</h3>");         $.each(data.hotels,function(i,item){           $('div.hotels').append('<ul></ul>').append("<li>"+item.name+"</li>").append("<li>"+item.description+"</li>");     });          $.each(data.location,function(i,item){           $('div.locations').append('<ul></ul>').append("<li>"+item.name+"</li>");        });                 }             });         })     </script>  </head> <body> <div class="myclass"> <div class="hotels"></div> <div class="locations"></div> </div>  </body> </html> 

Comments