Преобразование данных json в HTML с помощью цикла div
У меня есть следующий результат, и я хотел отобразить цикл html div из результата. Но все попытки провалились.
<?php
$location = $_GET['location'];
$checkin = $_GET['check_in'];
$checkout= $_GET['check_out'];
$adult= $_GET['adult'];
$child= $_GET['child'];
$handle = curl_init();
$url = "https://api.sandbox.amadeus.com/v1.2/hotels/search-airport?apikey=Gaois6WPa9VQ7WhxqqfV2XsD7J5gMMHX&location=$location&check_in=$checkin&check_out=$checkout&amenity=RESTAURANT&amenity=RESTAURANT&number_of_results=2";
curl_setopt($handle, CURLOPT_URL, $url);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
$output = curl_exec($handle);
curl_close($handle);
echo $output;
?>
<script>
var data = $output;
for(var i = 0, len = data.length; i < length; i++) {
var temp = '<tr><td>' + data[i].id + '</td>';
temp+= '<td>' + data[i].property_code+ '</td>';
temp+= '<td>' + data[i].property_name+ '</td>';
temp+= '<td>' + data[i].location+ '</td></tr>';
$('table tbody').append(temp));
}
</script>
Он предоставляет массив, но не может создать html-таблицу с соответствующими данными.
Извините, я ошибся, поместив строки кода, разместил правильную разметку
var data = $output; вы забыли повторить его, плюс теги конечно
Ответы 1
Исходя из того, что вы, как вы указали в вопросе, фактически возвращаете действительные данные json из amadeus api, возможно, может быть интересно следующее. Вместо того, чтобы использовать конкатенацию строк, ниже используются обычные методы манипулирования DOM, что, по-моему, является лучшим подходом.
Как было указано в первом комментарии - зачем так смешивать PHP и javascript? Если запросы выполняются клиентом в ответ на выбор пользователем параметров в форме (например), и запрос запускается javascript / ajax, тогда я могу понять необходимость использования javascript для обработки ответа, но для статической страницы или обычная отправка формы, действительно нет необходимости использовать javascript.
Я получаю код с помощью функции PHP под названием curl, которая здесь не показана.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>AMADEUS - JSON TO HTML</title>
<style>
table{width:100%;font-family:calibri,verdana,arial;display:table; border:1px solid black;background:whitesmoke;}
th{background:gray;color:white;}
tr{display:table-row;background:white;}
tr:nth-of-type(odd){background:whitesmoke;}
td{padding:0.5rem;margin:0.1rem;display:table-cell;border:1px dotted gray;}
</style>
<?php
/* assign javascript variable with json data */
echo "
<script>
let json=$output;
</script>";
?>
</head>
<body>
<table id='amadeus'>
<!-- an empty table.. -->
</table>
<script>
/* simple function to add a new table cell */
const addcell=function(data,parent){
let td=document.createElement('td');
td.innerText=data;
parent.appendChild( td );
};
let tbl=document.getElementById( 'amadeus' );
let results=json.results;
let properties=['property_code','property_name','location'];
console.info( results )
let tr=document.createElement('tr');
tbl.appendChild( tr );
properties.forEach( function( prop ){
let th=document.createElement('th');
th.setAttribute('scope','col');
th.innerText=prop;
tr.appendChild( th );
});
results.forEach( function(obj){
tr=document.createElement('tr');
tbl.appendChild( tr );
/* Alternative method to get data into cells */
addcell( obj.property_code, tr );
addcell( obj.property_name, tr );
addcell( [obj.location.latitude, obj.location.longitude ].join(','), tr );
});
</script>
</body>
</html>
измененный код, приведенный выше, теперь генерируется примерно так:
Круто, это работает как по волшебству, мне действительно нужно отточить свое фундаментальное понимание этого. очень признателен за ваши добрые усилия и руководство. Будьте здоровы
var properties = ['property_code', 'property_name', 'location [] -> lat itude']; Как мне узнать широту / долготу? Я пробовал указанный выше синтаксис, но безуспешно
Вместо того, чтобы снова обрабатывать массив (properties) для добавления фактических данных, вы можете вручную добавить ячейку таблицы для каждого элемента - и таким образом вы можете получить доступ к location.latitude, location.longitude и т. д. Я просто использовал массив для удобства в примере.
Значит ли это так? let properties = ['property_code', 'property_name', 'location.latitu de'];
Я просто попробовал последние изменения, которые вы рекомендовали для объединения двух объектов. он работает очаровательно, и теперь я пытаюсь объединить сумму и символ валюты, следуя тому же методу :) Как мне сделать какой-то вклад лично вам, вы сэкономили много моего времени
если бы я помог просто принять ответ и, возможно, проголосовать тоже - кроме этого больше ничего не требуется
Это очень любезно с твоей стороны, RamRaider, я желаю всего наилучшего в твоих будущих начинаниях и усилиях. Тем не менее, с нетерпением жду возможности получить от вас столько же знаний и рекомендаций в ближайшем будущем :)
Как мне создать ссылку на контент? А также как сделать <img src>. Я пробовал следующий код, но безуспешно addcell ('<a href = "'+obj._links.more_rooms_at_this_hotel.href+'"> View </a> ', tr); он рекламирует "перед значением и" в конце
Почему вы смешали javascript и php?