JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app"></div>

JavaScript

var dataLayer = [
  {
    "hotel_id" : "993932",
    "check_in_date_year" : "2017",  
    "hotelRecommended" :
    [
      {
        "hotel_name" : "The Kana Kuta Hotel",
        "pegipegi_ratings" : "8.0",
        "tripadvisor_ratings" : "9.0",
      },
      {
        "hotel_name" : "AlamKulKul Boutique Resort",
        "pegipegi_ratings" : "7.9",
        "tripadvisor_ratings" : "9",
      },
      {
        "hotel_name" : "Four Season",
        "pegipegi_ratings" : null,
        "tripadvisor_ratings" : null,
      }
    ]
  }
];

var a = $('#app');

$(function() {
	dataLayer.forEach(function(layer) {
  	layer.hotelRecommended.forEach(function(hotel) {
    	var namaHotel = $("<div style='border:1px solid red'>"+hotel.hotel_name+"</div>");
      var ppRating = $("<div class='pp' style='color:orange; font-weight:bold'>pegipegi rat: "+ hotel.pegipegi_ratings +"</div>");
      
      var taRating = $("<div class='ta' style='color:green;'>tripadvisor rat: "+ hotel.tripadvisor_ratings +"</div>");
      
      var divParent = $("<div />");
      divParent.append(namaHotel);
      
      if(hotel.pegipegi_ratings !== null){
				divParent.append(ppRating);
      }

      if(hotel.tripadvisor_ratings != null){
      	divParent.append(taRating);
			}
      
      a.append(divParent);
    });
  });
});