将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

回答

相关问题