Javascript 将JSON数组输出到图像网格_Javascript_Php_Json

Javascript 将JSON数组输出到图像网格

javascript php json

Javascript 将JSON数组输出到图像网格,javascript,php,json,Javascript,Php,Json,Update查看下面邪恶臭鼬的答案，我在surfboards.php中重复了两行代码，以确认与数据库，但由于该文件也是我生成JSON的地方 DB的输出—然后这两行使输出无效（不再只是JSON），我无法执行从输出中打印任何内容。工作代码位于github链接如果有人感兴趣，请看下面抱歉，如果这是一个重复，但我已经研究，我找不到任何有帮助的。我有一些来自学校的旧作业代码，它在JSON数组中收集数据，并将数据输出到创建图像网格的div。我试图重新使用它，但我被卡住了我已经连接到我的数据库，并且

Update查看下面邪恶臭鼬的答案，我在

surfboards.php

中重复了两行代码，以确认与数据库，但由于该文件也是我生成JSON的地方 DB的输出—然后这两行使输出无效（不再只是JSON），我无法执行从输出中打印任何内容。工作代码位于github链接如果有人感兴趣，请看下面

抱歉，如果这是一个重复，但我已经研究，我找不到任何有帮助的。我有一些来自学校的旧作业代码，它在JSON数组中收集数据，并将数据输出到创建图像网格的

div

。我试图重新使用它，但我被卡住了

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

我所拥有的：

//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>');
      });
});

<div class="flexbox_container">
    <section id="board_table">
      <h1><--Boards Should Show Here --></h1>
      <!--/* Javascript will publish our products here */-->
    </section>
</div>

{
"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": ""
    }
},

  <!-- Start Scripts -->
  <script src="jquery/dist/jquery.js"></script>
  <script src="scripts/bootstrap.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <script src="scripts/jquery.fullPage.min.js"></script>
  <script src="scripts/modernizr.js"></script>
  <script src="scripts/main.js"></script>
  <script src="scripts/surfboard.js"></script>

一种页面，在该页面上有一个
```
部分
```
，该部分具有
```
board\u表的id
```


中的大量数组JSON数据
scripts/surfboard.JS
中的JS块，试图。将JSON数据追加到board\u表中

我仔细检查了一遍，并将scripts/surfboard.js
包含在包含的head.php
文件中
页面输出中没有任何内容
链接到githuub项目


我想要什么：
//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>');
      });
});

<div class="flexbox_container">
    <section id="board_table">
      <h1><--Boards Should Show Here --></h1>
      <!--/* Javascript will publish our products here */-->
    </section>
</div>

{
"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": ""
    }
},

  <!-- Start Scripts -->
  <script src="jquery/dist/jquery.js"></script>
  <script src="scripts/bootstrap.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <script src="scripts/jquery.fullPage.min.js"></script>
  <script src="scripts/modernizr.js"></script>
  <script src="scripts/main.js"></script>
  <script src="scripts/surfboard.js"></script>


surfboards.php
中的JSON将动态输出到equipment.php
并附加到board\u表中
使用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>');
      });
});

<div class="flexbox_container">
    <section id="board_table">
      <h1><--Boards Should Show Here --></h1>
      <!--/* Javascript will publish our products here */-->
    </section>
</div>

{
"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": ""
    }
},

  <!-- Start Scripts -->
  <script src="jquery/dist/jquery.js"></script>
  <script src="scripts/bootstrap.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <script src="scripts/jquery.fullPage.min.js"></script>
  <script src="scripts/modernizr.js"></script>
  <script src="scripts/main.js"></script>
  <script src="scripts/surfboard.js"></script>

surfboards.php中的示例JSON块
：
//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>');
      });
});

<div class="flexbox_container">
    <section id="board_table">
      <h1><--Boards Should Show Here --></h1>
      <!--/* Javascript will publish our products here */-->
    </section>
</div>

{
"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": ""
    }
},

  <!-- Start Scripts -->
  <script src="jquery/dist/jquery.js"></script>
  <script src="scripts/bootstrap.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <script src="scripts/jquery.fullPage.min.js"></script>
  <script src="scripts/modernizr.js"></script>
  <script src="scripts/main.js"></script>
  <script src="scripts/surfboard.js"></script>

来自head.php文件的代码：
//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>');
      });
});

<div class="flexbox_container">
    <section id="board_table">
      <h1><--Boards Should Show Here --></h1>
      <!--/* Javascript will publish our products here */-->
    </section>
</div>

{
"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": ""
    }
},

  <!-- Start Scripts -->
  <script src="jquery/dist/jquery.js"></script>
  <script src="scripts/bootstrap.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <script src="scripts/jquery.fullPage.min.js"></script>
  <script src="scripts/modernizr.js"></script>
  <script src="scripts/main.js"></script>
  <script src="scripts/surfboard.js"></script>



非常感谢您的帮助
 为了在本地测试它，我模拟了你的surfaceboards.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>'
      );
});

使用该代码，我可以在#board_表中显示项目
第二件事-在你的github回购协议中，你仍然使用美元（“#board_table”）。将附加到-但我认为你自己已经发现了这个问题：）
非常感谢你的帮助@Evil_skunk。但是，我在上面添加了您的代码，但仍然没有页面输出。我已经更新了回购协议和实时网站。奇怪的是，它似乎没有找到#board_表
div？是的，.appendTo
是一个旧的错误尝试，我忘记了用另一个提交覆盖：）奇怪-我用你当前的代码再次尝试了，它对我有效-我只是用冲浪板\u php\u output.json中的静态json替换了冲浪板.php
的内容（删除了前两行和后4行），浏览器显示的冲浪板项目（div）超过100个-样式需要改进，但看起来基本正常：-）-顺便说一句。感谢您的源代码积分在浏览器调试器控制台中收到任何错误消息吗？-如果没有，请检查debugger network选项卡并检查对surfboards.php
returnsAhh的请求，好的，我按照您所说的@Evil\u skunk做了，它工作了……将静态JSON添加到surfboards.php'，并显示在device.php`页面上。现在唯一的问题是数据库信息将要更改…例如。我需要用实际的电路板而不是占位符替换所有的图像。我有一个带有相应文件名的excel工作表，我将上载并覆盖当前数据库。surfboards\u original.php
现在是将信息从数据库输出到网页的文件。有没有办法从中提取并在equipment.php
上显示它，这样它就会随着数据库的更新而更新？而且不用担心信用！我非常相信归因！：）