学习将json对象转换为java脚本并在HTML中显示输出

-3

我需要学习将JSON对象转换为javascript。在下面的JSON中有2列，我将如何迭代这两列。请帮助我。学习将json对象转换为java脚本并在HTML中显示输出

{ 

    "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"} 

} 

}

我能够在浏览器的控制台上观看我的输出，但无法在浏览器上显示它。

请用下面的代码检查。

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

来源

2016-08-01 Harshad Patil

有些迂腐：没有这样的事情JSON对象; JSON是一个字符串;它可能会转换为JavaScript对象（JSON名称从中衍生出来）。至于将它输出为HTML，您需要用循环遍历它并创建DOM元素。你尝试过什么吗？ – Utkanos

你会得到什么错误？ – gcampbell

你试图在浏览器中显示的内容 – Paarth

你可以试试这个代码显示在浏览器

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

来源

2016-08-01 14:03:53 Paarth

好:)期待相同的输出。谢谢:) –

这是一些入门的代码。这里是您的ajax请求中的response。

var json = '{"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"}}}'; 
 

 
var obj = JSON.parse(json); 
 

 
var hotels = obj.hotels; 
 
var locations = obj.location; 
 

 

 
/* To access hotels */ 
 
for (var i in hotels) { 
 
    var hotel = hotels[i]; 
 
    console.log(hotel.name + ":" + hotel.description); 
 
}

来源

2016-08-01 13:34:57 Pugazh

它工作得很好，请给我解释一下代码？请？ –

@HarshadPatil - 你有什么JS经验吗？这是非常基本的东西。我鼓励你阅读关于基本JS的教程。 – evolutionxbox

好的非常感谢你的支持:) –

学习将json对象转换为java脚本并在HTML中显示输出

回答

相关问题