加载 JSON 文件并打印特定部件

Question

我正在为学校构建一个简单的网页。可悲的是，我遇到了几个问题。我使用带有 XAMPP 的 Apache Web 服务器。

我有一个 JSON 文件，例如：

{
    
"lose":[
{
    "Zustand":"geschlossen",
    "Losnummer":1,
    "Gewinnklasse":"A",
    "Preis":10
},

{
    "Zustand":"geschlossen",
    "Losnummer":2,
    "Gewinnklasse":"B",
    "Preis":20
},

这个文件也在我的网络服务器上。我想用 XHTML 请求加载这个文件，然后想把这个 JSON 文件的几个部分打印成 HTML/PHP 代码。我看了很多 youtube 视频，但我没有找到适合我的方法。我设法通过 XHTML 加载 JSON 文件，并且能够以 HTML 格式打印它，但它始终是所谓的“responseText”中的整个 JSON，这对我来说基本上是一个大字符串。我在这方面还很新，如果我把事情搞砸了，很抱歉。

所以 TLDR：在网页中加载 JSON 文件，在几个 HTML div 标签中打印它的单个部分。我允许使用 html,php,js。

Answer 1

类似这样的：

<?php 
$json = 
'
{
    "lose": [
    {
        "Zustand":"geschlossen",
        "Losnummer":1,
        "Gewinnklasse":"A",
        "Preis":10
    },
    {
        "Zustand":"geschlossen",
        "Losnummer":2,
        "Gewinnklasse":"B",
        "Preis":20
    }]
}
';

$arr = json_decode($json, true);
echo "<table border='1'>";
foreach($arr["lose"] as $single) {
    echo "<tr>";
    echo "<td>".$single['Zustand']."</td>";
    echo "<td>".$single['Losnummer']."</td>";
    echo "</tr>";
}
echo "</table>";

Answer 2

在JS中，可以使用内置的JSON.parse()方法。

https://www.w3schools.com/Js/js_json_parse.asp

然后，您可以作为一等公民访问该数据结构中的各个元素。

使用您的示例，这是一个最小的工作示例：

let dataString = ` 
{
    "lose":[
        {
            "Zustand":"geschlossen",
            "Losnummer":1,
            "Gewinnklasse":"A",
            "Preis":10
        },    
        {
            "Zustand":"geschlossen",
            "Losnummer":2,
            "Gewinnklasse":"B",
            "Preis":20
        }
    ]
}
`

let data = JSON.parse(dataString);


// If we log out data, it will simply print everything
console.log(data);

// This will access the first element of the array
console.log(data.lose[0]); 

// To iterate through the entire 'LOSE' array
data.lose.forEach(element => {
    // Since we're in the middle of the array, we can now access individual properties
    console.log(element.Zustand);
});