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は文字列です。それはJSONという名前のJavaScriptオブジェクトに変換される可能性があります。これを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で出力することを学ぶ

答えて

関連する問題