PHP date() 到 JavaScript new Data() - 内部数组答案

【问题标题】：PHP date() to JavaScript new Data() - Inside arrayPHP date() 到 JavaScript new Data() - 内部数组
【发布时间】：2015-05-14 07:09:23
【问题描述】：

注意：这是an earlier post of mine 的后续问题。

我有一个 PHP 数组，我需要将其解析为 JavaScript。目前我正在尝试这样做，在 JavaScript 中使用<?php echo json_encode($array_name)?>。对于数组中的大多数数据，这工作正常，日期除外。我试图解析的数组如下所示：

$timeData = array(
  array('1', 'Some task',        date('2015-04-09'), date('2015-04-23')),
  array('2', 'Another task',     date('2015-04-13'), date('2015-04-20')),
  array('3', 'A different task', date('2015-04-16'), date('2015-04-30))
);
?>

我需要解析这个数组，使其在Google Charts Timeline 中可用，函数看起来像这样（见代码中的注释）：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">

google.setOnLoadCallback(drawChart);
function drawChart() {
  var container = document.getElementById('example2.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Term' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  // This is the part I would like to replace with the PHP array
  dataTable.addRows([
    [ '1', 'George Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ '2', 'John Adams',        new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
    [ '3', 'Thomas Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

  chart.draw(dataTable);
}
</script>

我尝试了几种在 PHP 数组中创建日期的不同方法，包括 new Date() 和 new DateTime()，但都没有成功。我最后的手段是在解析数据之前将数组分成几部分。然而这似乎有点傻，因为它要在 JavaScript 中再次组合成一个数组。有什么方法可以在 PHP 数组中写入日期，以便它们在解析为 JavaScript 时起作用？

【问题讨论】：

看看这个问题：stackoverflow.com/questions/9755911/…
有效的解决方案在答案中 - stackoverflow.com/questions/36233412/…

标签： javascript php arrays json date

【解决方案1】：

在 PHP 端，您可以返回时间戳，以便在 JavaScript 中更容易处理：

<?php    
$timeData = array(
    array('1', 'Some task',        DateTime::createFromFormat('Y-m-d', date('2015-04-09'))->format('U')*1000, DateTime::createFromFormat('Y-m-d', date('2015-04-23'))->format('U')*1000,
    array('2', 'Another task',     DateTime::createFromFormat('Y-m-d', date('2015-04-09'))->format('U')*1000, DateTime::createFromFormat('Y-m-d', date('2015-04-20'))->format('U')*1000,
    array('3', 'A different task', DateTime::createFromFormat('Y-m-d', date('2015-04-16'))->format('U')*1000, DateTime::createFromFormat('Y-m-d', date('2015-04-30'))->format('U')*1000
);
?>

对于 JavaScript 部分，您可以遍历结果以追加行：

/* Assuming rows contains a valid JS array with dates expressed as timestamps in milliseconds
    rows = [
        [1, "Some task", 1428570428000, 1429780165000],
        [2, "Another task", 1428570428000, 1429520977000],
        [3, "A different task", 1429175344000, 1430384993000]
    ];
*/
for (var i = 0; i < rows.length; i++) {
    dataTable.addRow(
        rows[i][0],
        rows[i][1],
        new Date(rows[i][2]),
        new Date(rows[i][3]),
    );
}

也可以根据 Google 的文档Dates and Times Using the Date String Representation 将日期作为字符串发送。所以你也可以从 PHP 中返回它（注意在 JS 中月份是零索引的）：

<?php    
$timeData = array(
    array('1', 'Some task',        "Date(2015, 3, 9, 0, 0, 0, 0)", "Date(2015, 3, 23, 0, 0, 0, 0)",
    array('2', 'Another task',     "Date(2015, 3, 9, 0, 0, 0, 0)", "Date(2015, 3, 20, 0, 0, 0, 0)",
    array('3', 'A different task', "Date(2015, 3, 16, 0, 0, 0, 0)", "Date(2015, 3, 30, 0, 0, 0, 0)"
);
?>

在 JS 中只需这样做：

/* Assuming rows contains a valid JS array with dates expressed as strings
    rows = [
        [1, "Some task", "Date(2015, 3, 9, 0, 0, 0, 0)", "Date(2015, 3, 23, 0, 0, 0, 0)"],
        [2, "Another task", "Date(2015, 3, 9, 0, 0, 0, 0)", "Date(2015, 3, 20, 0, 0, 0, 0)"],
        [3, "A different task", "Date(2015, 3, 16, 0, 0, 0, 0)", "Date(2015, 3, 30, 0, 0, 0, 0)"]
    ];
*/
dataTable.addRows(rows);

【讨论】：

在这种情况下，rows 到底是什么？我不知道如何从$timeData 到rows..？伙计，我很讨厌这个：-/
那个谷歌链接看起来很有希望，现在我只需要弄清楚如何使用它:-)
rows 是您从 PHP 中获得的数组，但现在在 JS 中。我假设您使用 AJAX 从 PHP 获取响应，然后执行回调以呈现图表，也许您的做法有所不同。我已经更新了代码以显示 PHP 的预期结果以及每种情况下 JS 中的 rows 变量的值。希望对您有所帮助。
目前不使用 AJAX，但我开始认为我可能不得不...
使用 AJAX 不是强制性的。如果将 JSON 内容嵌入到同一个 php 页面中，则可以将 JSON 内容打印到 JavaScript 中，只需添加 php 标记并打印 JSON 结果，因此在 JS 部分中，dataTable.addRows(rows) 之前，您可以执行类似 var rows = <?php echo json_encode($timeData); ?>; 的操作.这应该将所需的数组结构返回到 rows 变量中，并且应该使您的脚本工作。

【解决方案2】：

您不能将此格式传递给 Date 构造函数。试试这样：

var parts = mydate.split('-');
var mydateparsed = new Date(parts[0],parts[1],parts[2]);

希望对你有用。

问候

【讨论】：

直接在 JavaScript 中从数据库加载数据会更容易吗？据我了解，这应该是可能的，但是比 PHP 更麻烦。
你能解释一下这个问题吗？我不确定你是否理解
我的意思是我在某处读到，您可以使用称为 AJAX 的东西连接到 MySQL 数据库。然后也许，使用它，可以在 JavaScript 中创建表，而不是从 PHP 转换它
好的，我明白了。您有两种实现选项：PHP 或 AJAX。 - 在 PHP 中，从客户端的角度来看，这是最简单的但不是动态的。 - 如果您是初学者，在 AJAX 中会有些困难。你也可以试试。将值包装成 JSON 结构并通过 AJAX 连接将其提供给客户端。

【解决方案3】：

我在 jQuery 中创建了一个循环，在使用 json_encode 转换数组后将每个日期转换为 JS 日期：

<?php "var timeData = " . json_encode($timeData) . ";\n"; ?>
$.each( timeData, function ( index, value )
{
    timeData[index]['2'] = new Date(value['2']);
    timeData[index]['3'] = new Date(value['3']);
})

请注意，此解决方案是在客户端处理的（它减轻了服务器的负担）。

【讨论】：