學習將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中顯示輸出

回答

相關問題