时间戳

首页 > 解决方案 > 使用 JS 槽 HTML 显示 Json

javascript - 使用 JS 槽 HTML 显示 Json

问题描述

我想显示我的 JSon 的 id 信息，我用 PHP 做了数据库和后端，我正在使用带有 HTML 的 JS 在浏览器中显示它。我现在有点卡住了。那是后端，我将它的数据库与 Apache 链接起来：

?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";

$mysqli = new mysqli($servername, $username, $password, $dbname);
include "db_connection.php";
$myJSON = array();

if ($result = $mysqli->query("SELECT * FROM playas")) {

    while($row = $result->fetch_array(MYSQLI_ASSOC)) {
        $myJSON[] = $row;
    }
    echo json_encode($myJSON);
}

$result->close();
$mysqli->close();

在其他文档中，我有 js 和 html：

var requestOptions = {
    method: 'GET',
    redirect: 'follow'
};

function getData() {
    fetch("http://localhost/practice/backend/playas.php")
        .then(response => response.text())
        .then(myRawData => {
            const myJsonData = JSON.parse(myRawData)
            console.log(myJsonData);
            document.getElementById("contenido").innerHTML = myJsonData;
        })

    .catch(error => console.log('error', error));
    for (let i = 0; i < myJsonData.length(); i++) {

    }

}
getData();

我尝试了一些东西，我知道必须迭代 JSon，但它现在只显示： [object Object],[object Object],[object Object],[object Object]

我也知道我必须使用document.getElementById("").innerHTML或类似的东西。

JSON：

[{"id":"1","nombres_playas":"deveses","numero_hamacas":"10","telefono":"916344412","mail":"deveses@mail.com"}, 
{"id":"2","nombres_playas":"bolonia","numero_hamacas":"13","telefono":"916552312","mail":"bolonia@mail.es"},
{"id":"3","nombres_playas":"granadella","numero_hamacas":"5","telefono":"965431222","mail":null},
{"id":"4","nombres_playas":"malvarosa","numero_hamacas":"21","telefono":"","mail":"malvarosa@yahoo.es"}]

谢谢您的帮助！！！

标签： javascriptphphtmljsonweb

解决方案

您得到 [Object] 是因为您无法将 javascript 对象直接呈现为 HTML。如果要显示完整的 JSON，可以将其字符串化，然后放入 HTML，如下所示：

document.getElementById("elementId").innerHTML(JSON.stringify(myJsonData))

这就是你需要做的！

推荐阅读