Question

更新请参见下面的Evil_skunk回答，我在LC_139中回显了两行代码，以确认与数据库，但是由于该文件也是我生成JSON的地方从数据库输出，然后这两行使输出无效（不再只是JSON），我无法打印该输出中的任何内容。工作代码在github链接上如果有人感兴趣，请在下面查看。

很抱歉，如果这是重复的，但是我已经研究过了，在这里找不到任何帮助。我有一个学校的旧作业代码，该代码将数据收集到JSON数组中并将其输出到创建图像网格的surfboards.php中。我正在尝试重用它，但是卡住了。

我已经连接到数据库，并且正在将JSON打印到一个php文件中，我只是无法正确获取语法以使其在所需的php页面上打印该数组。

我所拥有的：

位于equipment.php的页面，其中包含div和section为id的页面
surfboards.php中的大量JSON数组数据
board_table内的一个JS块试图将JSON数据scripts/surfboard.js到.append
我已仔细检查，并在包含的board_table文件中包含了scripts/surfboard.js
页面输出无内容
链接到githuub项目nalu

我想要的东西：

head.php中的JSON将动态输出到surfboards.php，并附加到equipment.php，使用来自board_table的代码块创建图像网格

来自surfboard.js的代码：

surfboard.js

来自//gets the JSON from our surfboards.php $.getJSON("surfboards.php", function (data) { //loop through each surfboard in the JSON file and append id="board_table" with the surfboard information $.each(data.Surfboards, function (row) { $("#board_table").append( '<div class="surfboard"><a href="equipment.php?id=' + data.Surfboard[row].Surfboard.id + '"><img src="images/' + data.Surfboard[row].Surfboard.imageName + '" alt="' + data.Surfboard[row].Surfboard.imageName + '"><p>' + data.Surfboard[row].Surfboard.name + '</p><p>$' + data.Surfboard[row].Surfboard.price + '</p></a></div>'); }); });的代码：

equpiment.php

来自<div class="flexbox_container"> <section id="board_table"> <h1><--Boards Should Show Here --></h1>  </section> </div>的JSON阻止示例：

surfboards.php

{ "Surfboards": [ { "Surfboard": { "id": "1", "sNumber": "6", "boardName": "Pat Curren Balsa Gun 12'", "imageName": "camera.png", "year": "1950", "weight": "32", "dimensions": "21", "caDescription": "This board was built in Hawaii by Pat Curren, for Bev Morgan (early California wetsuit inventor and diving pioneer)", "infoCard": "placeholder_infoCard", "notes": "" } },文件中的代码：

head.php

非常感谢您的帮助！

Answer 1

要在本地对其进行测试，我模拟了您的surfboards.php并仅打印了您提供的json（因为我没有您的数据库）

对我来说，您的json结构似乎与surfboard.js中的输出不符

$.each(data.Surfboards, function (row) {
      $("#board_table").append(
        '<div class="surfboard"><a href="equipment.php?id=' + data.Surfboard[row].Surfboard.id + '">...</a></div>'
      );
});

data.Surfboard不可用-因为您的json以Surfboard s 开头。为了使它更容易，我将使用

 $.each(data.Surfboards, function (row, element) {
     $("#board_table").append(
         '<div class="surfboard"><a href="equipment.php?id=' + element.Surfboard.id + '"><img src="images/' + element.Surfboard.imageName + '" alt="' + element.Surfboard.imageName + '"><p>' + element.Surfboard.name + '</p><p>$' + element.Surfboard.price + '</p></a></div>'
      );
 });

使用该代码，我将项目显示在#board_table

中

还有第二件事-在您的github存储库中，您仍然使用$（“＃board_table”）。append To -但我认为您已经发现了这个问题：）

将JSON数组输出到图像网格

1 个答案: