Turn js objects into html

Question

OK, so I have some JS that pulls data from JSON via URL. I know Want to turn each object (author_name, rating, author_url) into js ID's so i can call the ID in html.

for example

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

this is my JS code so far

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

what is the best way to get these into html so I can style and use around the page?

Create an `li` element with the desired content and `append()` it to your `ul` — empiric, Dec 06 '16 at 14:02
Nice information, thanks ill try this. like ? (place.reviews[i].author_name) append(li) ? — Benjamin Oats, Dec 06 '16 at 14:02
eval , innerHtml , http://stackoverflow.com/questions/11351135/create-ul-and-li-elements-in-javascript — Nikola Lukic, Dec 06 '16 at 14:04
Take a look ad `lodash templates` or any [other template](http://ejs.co/) script, it's just what you need — vsync, Dec 06 '16 at 14:04

score 3 · Accepted Answer · answered Dec 06 '16 at 14:04

Your html file will look like this:

<ul id="parent">

</ul>

Include the jquery script in the header of your html.

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

Now this is the code you want:

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

You create a li tag for each of the variable you want to append and append it to parent.

some var could be (place.reviews[i].relative_time_description); ? — Benjamin Oats, Dec 06 '16 at 14:09

score 0 · Answer 2 · answered Dec 06 '16 at 14:04

Dynamically create DOM element and append to existing 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>')
       /* ... */
    ;
});

score 0 · Answer 3 · answered Dec 06 '16 at 14:10

You just need a loop that creates li elements (with whatever content pattern you need) and appends them to the ul element. This is vanilla 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>

Turn js objects into html

3 Answers3