jsオブジェクトをhtmlにします

Question

OK、私はJSONからURL経由でデータを取得するJSをいくつか持っています。 私は各オブジェクト（author_name、rating、author_url）をjs IDに変換したいので、htmlでIDを呼び出すことができます。例えば

<ul> 
    <li id=''></li> 
    <li id=''></li> 
    <li id=''></li> 
</ul> 

これは私がスタイルやページの周りに使用できるようにHTMLにこれらを取得するための最良の方法は何か、これまで

<div id="map"></div> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=123-mg&libraries=places&callback=initMap"></script> 
<script> 
    function initMap() { 
     var service = new google.maps.places.PlacesService(map); 
     service.getDetails({ 
      placeId: '123' 
     }, function(place, status) { 
      if (status === google.maps.places.PlacesServiceStatus.OK) { 
       for(var i=0; i <= place.reviews.length; i++) { 
        console.log(place.reviews[i]); 
        alert(place.reviews[i].author_name); 
        alert(place.reviews[i].rating); 
        alert(place.reviews[i].author_url); 
        alert(place.reviews[i].text); 
        alert(place.reviews[i].relative_time_description); 
        alert(place.reviews[i].profile_photo_url); 
       } 
      } 
     }); 
    } 
</script> 

私のJSコードのですか？

Answer 1

HTMLファイルは次のようになります。

<ul id="parent"> 

</ul> 

はあなたのhtmlのヘッダーにjqueryのスクリプトを含めます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

これは、あなたがしたいコードです：

var child = someVariable; //Where somevariable is the variable you fetch from the url. 
$("#parent").append('<li id="id_you_want_to_give">'+child+'</li>'); 

あなたは親にそれを追加し、追加したい変数のそれぞれについて、liタグを作成します。

Answer 2

動的にDOM要素を作成し、既存のHTMLに

var parent = $('ul'); 
parent.html(''); 

$.each(place.reviews, function() { 
    parent 
     .append('<li class="parent-name">'+this.author_name+'</li>') 
     .append('<li class="rating">'+this.rating+'</li>') 
     /* ... */ 
    ; 
}); 

Answer 3

を追加あなたは（あなたが必要なコンテンツどんなパターンで）li要素を作成し、ul要素にそれらを追加したループを必要としています。これは、バニラJSである：

var reviews = [ 
 
    { 
 
    author_name: "John Smith", 
 
    rating: 5, 
 
    author_url: "http://johnsmith.com", 
 
    text: "This place is fantastic!", 
 
    relative_time_description: "", 
 
    profile_photo_url: "" 
 
    }, 
 
    { 
 
    author_name: "Jim Conway", 
 
    rating: 3, 
 
    author_url: "http://jimconway.com", 
 
    text: "The food was ok, but the coding is mediocre.", 
 
    relative_time_description: "", 
 
    profile_photo_url: "" 
 
    } 
 
]; 
 

 
function updateReviews(data){ 
 
    var reviews = document.getElementById('reviews') 
 
    for(var i=0; i<data.length; i++) { 
 
    var li = document.createElement('li'); 
 
    li.id = "review"+i; 
 
    li.innerText = data[i].author_name +": "+data[i].text; 
 
    reviews.append(li); 
 
    } 
 
} 
 

 
updateReviews(reviews);

<ul id="reviews"> 
 
    
 
</ul>