使用JS解析多维数组显示多条SQL记录

Question

我想使用 JS/JQuery/PHP/MySQLi 自动生成一个 HTML 表来填充页面上的一个 div，该页面还包括一​​个允许用户输入搜索条件的 div。例如：输入日期范围，单击按钮将这些日期 $.post 到 PHP 文件，该文件查询 MySQLi 表并将多维数组返回给 JS，然后在构建 HTML 时解析该数组。

因此，从用户的角度来看，他输入了开始日期和停止日期，并且在同一页面的其他位置，他会看到在这两个日期之间进行的所有预订的列表。

出于代码管理目的，我想将我的 JS 脚本作为 HTML 页面标题中引用的单独文件，并将我的 PHP 脚本作为从 JS 脚本引用的单独文件。

我的 JS 脚本看起来像这样：

$(document).ready(function(){
    var startDate = new Date (2017,11,25);
    var stopDate = new Date (2017,11,31);
    displayBookings = function(startDate, stopDate) {
        $.post("php/getBookings.php", {
        startDate: startDate, 
        stopDate: stopDate
        },
        function(data){
            html = "<table>";   
            var i, j, result = JSON.parse(data); 
            while (i=0, i <= result.length, i++) {
               while (j=0, j <= result[i].length, j++) {          
                    html+= "<tr><td>"+result[i][j]+"</td></tr>";
                }
            }
            html += "</table>";
            $('#bookings').html(html);
        });
    };
});

我的 php 脚本（'getBookings.php'）如下所示：

<?php
$startDate = date('Y-m-d',strtotime($_POST["startDate"]));
$stopDate = date('Y-m-d',strtotime($_POST["stopDate"]));
$con = mysqli_connect("localhost","userid","password","database");
$sql = "SELECT * FROM bookings WHERE date BETWEEN '$startDate' AND '$stopDate'";
$result = mysqli_query($con,$sql);
$rows = mysqli_num_rows($result);
for ($i = 0; $i < $rows; $i++) {
    $row = mysqli_fetch_array($result);
    $newArray[$i]['reference'] = $row['reference'];
    $newArray[$i]['name'] = $row['name'];
    $newArray[$i]['price'] = $row['price'];
}
mysqli_free_result($result);
mysqli_close($con);
echo json_encode($newArray);
?>

我的 HTML 代码包括：

<button onClick='displayBookings()'>Press</button>
<div id="bookings"></div>

但是当我按下按钮时，我得到：

Uncaught TypeError: Cannot read property 'length' of null

我是初学者，所以我知道我可能犯了一些基本错误。有人可以帮忙吗？

Answer 1

您的问题很可能是while (i=0, i <= result.length 应该是：while (i=0, i < result.length，j 也是如此。

使用map 或reduce 可能会更好：

$(document).ready(function () {
  var startDate = new Date(2017, 11, 25);
  var stopDate = new Date(2017, 11, 31);
  displayBookings = function (startDate, stopDate) {
    $.post("php/getBookings.php", {
      startDate: startDate,
      stopDate: stopDate
    },
      function (data) {
        console.log(JSON.stringify(data,undefined,2));
        html = "<table>" +
          data.map(
            row=>{
              row.map(
                item=>`<tr><td>${item}</td></tr>`
              ).join("");
            }
          ).join("") + "</table>";
        $('#bookings').html(html);
      });
  };
});

如果您的 PHP 返回一个带有 JSON 属性的对象，那么您可以尝试以下操作：

$(document).ready(function () {
  var startDate = new Date(2017, 11, 25);
  var stopDate = new Date(2017, 11, 31);
  displayBookings = function (startDate, stopDate) {
    $.post("php/getBookings.php", {
      startDate: startDate,
      stopDate: stopDate
    },
      function (data) {
        console.log(JSON.stringify(data,undefined,2));
        html = "<table>" +
          Object.keys(data).map(
            key=>{
              Object.keys(data[key]).map(
                rowKey=>`<tr><td>${data[key][rowKey]}</td></tr>`
              ).join("");
            }
          ).join("") + "</table>";
        $('#bookings').html(html);
      });
  };
});

object的问题是没有关于订单的规范，例如：

Object.keys({
  first: 1,
  second:2
});

通常会产生["first","second"]，但不能保证会产生。

所以最好使用第一个代码块，但更改你的 PHP 来做：

$newArray = array()
for ($i = 0; $i < $rows; $i++) {
  $row = mysqli_fetch_array($result);
  $newArray[$i] = array(
    $row['reference'],
    $row['name'],
    $row['price']
  );
}

我假设您原来的 data.map is not a function 不是由 php 未正确转换数组引起的，因此使用该 PHP 您可以在第一个代码块中使用 JavaScript（data.map 和 row.map）