JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>Tes Data</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>	
	<table>
		<thead>
			<tr>
				<th>No</th>
				<th>Nama Hotel</th>
				<th>Order</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>
	
</body>

JavaScript

$(function(){
		
		var $content = $(".content");
		
		$.ajax({
		url         : "http://api.pegipegi.com/v2/getBanner",
		type        : "GET",
		dataType    : "json",
		success     : function(data){
			
			$.each(data, function(i, data){
				
				// banner atas atau bawah
				var tipe = '';
				if(data.is_type_main == 1) {
					tipe += "<li>Biasa</li>";
					}
				
				if(data.is_type_promo == 1) {
					tipe += "<li>Promo</li>";
					}
				
				// tipe banner flight, train, hotel
				var gabungan = '';
      
				if(data.is_product_flight == 1) {
					gabungan += "<li>Pesawat</li>";
					}

				if(data.is_product_hotel == 1) {
					gabungan += "<li>Hotel</li>";
				}

				if(data.is_product_train == 1) {
					gabungan += "<li>Kereta Api</li>";
					}
					// isi konten				
				$content.append("<tr>"
					// +"<td>" +data.name+ "</td>"
					+"<td>" +data.pc_image+ "</td>"
					/* +"<td><ul>" +tipe+ "</ul></td>"
					+"<td><ul>" +gabungan+ "</ul></td>" */
					+"</tr>");
			});
			
			
		},
		error:function(){
			alert('error');
		}
	});
});