Включите объекты js в html

Question

ОК, поэтому у меня есть JS, который извлекает данные из JSON по URL-адресу. Я знаю, что хочу превратить каждый объект (имя автора, рейтинг, author_url) в js ID, чтобы я мог вызвать ID в 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, так что я могу использовать стиль и вокруг страницы?

Answer 1

Ваш HTML-файл будет выглядеть следующим образом:

<ul id="parent"> 

</ul> 

Включите скрипт JQuery в заголовке вашего HTML.

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