將js對象轉換爲html

好的，我有一些JS通過URL從JSON中提取數據。我知道想要將每個對象（author_name，rating，author_url）轉換爲js ID，所以我可以在html中調用該ID。將js對象轉換爲html

例如

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

這是我的JS代碼到目前爲止

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

是什麼讓這些成HTML，所以我可以樣式和頁面各處使用的最佳方法？

來源

2016-12-06 Benjamin Oats

創建具有所需內容和'的append（）的'li'元素'它給你的'ul' – empiric

尼斯信息，由於生病嘗試。喜歡？（place.reviews [i] .author_name）append（li）？ –

eval，innerHtml，http://stackoverflow.com/questions/11351135/create-ul-and-li-elements-in-javascript –

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標籤。

來源

2016-12-06 14:04:48 user2507

有些var可能是（place.reviews [i] .relative_time_description）; ？ –

是的，它是你想要顯示的字符串。 – user2507

謝謝你生病了試試這個 –

動態創建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>') 
     /* ... */ 
    ; 
});

來源

2016-12-06 14:04:54 Justinas

你只需要創建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>

來源

2016-12-06 14:10:50

將js對象轉換爲html

回答

相關問題