Question

好的，所以我有一些JS通过URL从JSON中提取数据。我知道想要将每个对象（author_name，rating，author_url）转换为js ID，以便我可以在html中调用ID。

例如

<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的最佳方法是什么，以便我可以在页面上进行样式和使用？

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：

＆＃13;

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

＆＃13;

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

＆＃13;

将js对象转换为html

3 个答案: