js массив в php файле передать в html

Question

у меня есть файл php в котором есть массив в var arr; и я не как не могу предать его в обычный html подскажите, может я что-то делаю не так

Answer 1

В php есть функции json_encode(),json_decode() которые преобразуют значение переменной в JSON и наоборот.

JSON - JavaScript Object Notation, текстовый формат обмена данными, основанный на JavaScript. Данный формат повторяет способ создания объектов в JavaScript

Выглядит это так

{
   "firstName": "Иван",
   "lastName": "Иванов",
   "address": {
       "streetAddress": "Московское ш., 101, кв.101",
       "city": "Ленинград",
       "postalCode": 101101
   },
   "phoneNumbers": [
       "812 123-1234",
       "916 123-4567"
   ]
}

Соответственно Ваша задача:

преобразовать значение вашей переменной arr в JSON
любым удобным способом передать его в html

Способ первый. Примитивный.

Просто берем переменную, преобразуем ее в json и выводим в лоб (непосредственно в html)

Рабочий пример

<html>
<head>
</head>
<body>
<?php
$data = [
    [
        'name' => 'Рис Увелка пропаренный, 5×80 г',
        'url' => 'https://www.oxygen.ru/product/uvelka-krupa-ris-dlinnozernyy-v-paketah-dlya-varki-5-sht-po-80-g-138235081/',
        'price' => 77,
    ],
    [
        'name' => 'Гель-концентрат MEINE LIEBE, для мытья овощей, фруктов, детской посуды и игрушек, гипоаллергенный, 485 мл',
        'url' => 'https://www.oxygen.ru/product/meine-liebe-gel-dlya-mytya-ovoshchey-fruktov-detskoy-posudy-i-igrushek-kontsentrat-485-ml-135747632/',
        'price' => 185,
    ],
    [
        'name' => 'Худи KANKA',
        'url' => 'https://www.oxygen.ru/product/hudi-kanka-371029007/',
        'price' => 2000,
    ],
];
?>
<ul id="items">
</ul>
<script language="JavaScript">
    let container = document.getElementById("items");
    // совершенно варварским способом пробрасываем данные прямо в тег script
    let data = <?=json_encode($data);?>;
    for (let item of data) {
        let listItem = document.createElement("LI");
        listItem.innerHTML = item.name + "<br/>" +
                             item.url + "<br/>" +
                             item.price + "<br/>";
        container.appendChild(listItem);
    }
</script>
</body>
</html>

Результат:

Способ второй. Асинхронный.

Также ничто вам не мешает отдать данные в виде json'а в качестве HTTP ответа

<?php
header("Content-type: application/json");
$data = [
    [
        'name' => 'Рис Увелка пропаренный, 5×80 г',
        'url' => 'https://www.oxygen.ru/product/uvelka-krupa-ris-dlinnozernyy-v-paketah-dlya-varki-5-sht-po-80-g-138235081/',
        'price' => 77,
    ],
    [
        'name' => 'Гель-концентрат MEINE LIEBE, для мытья овощей, фруктов, детской посуды и игрушек, гипоаллергенный, 485 мл',
        'url' => 'https://www.oxygen.ru/product/meine-liebe-gel-dlya-mytya-ovoshchey-fruktov-detskoy-posudy-i-igrushek-kontsentrat-485-ml-135747632/',
        'price' => 185,
    ],
    [
        'name' => 'Худи KANKA',
        'url' => 'https://www.oxygen.ru/product/hudi-kanka-371029007/',
        'price' => 2000,
    ],
];
echo json_encode($data);

при запросе вы получите те же данные:

и далее их можно получить сделав асинхронный запрос с помощью JavaScript

    fetch("/test").then(function(response){
        return response.json();
    }).then(function(data){
        let container = document.getElementById("items");
        for (let item of data) {
            let listItem = document.createElement("LI");
            listItem.innerHTML = item.name + "<br/>" +
                item.url + "<br/>" +
                item.price + "<br/>";
            container.appendChild(listItem);
        }        
    });

Результат тот же

БЛОГ НА HUSL

js массив в php файле передать в html

Ответы (1 шт):

Способ первый. Примитивный.

Способ второй. Асинхронный.