PHP根据二维数组值生成动态HTML

Question

我具有以下$MessagesArray一维关联内部数组的PHP二维索引数组：

Array
(
    [0] => Array
        (
            [id] => 1
            [from] => Person 1
            [to] => Person 2
            [platform] => Instagram Direct Messaging
            [date] => 2016/11/27
            [time] => 11:00
            [ampm] => AM
            [specialcontent] => none
            [content] => Hello
        )

    [1] => Array
        (
            [id] => 2
            [from] => Person 1
            [to] => Person 2
            [platform] => Instagram Direct Messaging
            [date] => 2016/11/27
            [time] => 11:00
            [ampm] => AM
            [specialcontent] => none
            [content] => How are you?
        )

    [2] => Array
        (
            [id] => 3
            [from] => Person 2
            [to] => Person 1
            [platform] => Instagram Direct Messaging
            [date] => 2016/11/27
            [time] => 6:00
            [ampm] => PM
            [specialcontent] => none
            [content] => Oh, hey there. I'm fine
        )

    [3] => Array
        (
            [id] => 4
            [from] => Person 2
            [to] => Person 1
            [platform] => Instagram Direct Messaging
            [date] => 2016/11/27
            [time] => 6:01
            [ampm] => PM
            [specialcontent] => none
            [content] => What about you?
        )

    [4] => Array
        (
            [id] => 5
            [from] => Person 1
            [to] => Person 2
            [platform] => Instagram Direct Messaging
            [date] => 2016/11/28
            [time] => 8:00
            [ampm] => AM
            [specialcontent] => none
            [content] => It's been a while.
        )

    [5] => Array
        (
            [id] => 6
            [from] => Person 1
            [to] => Person 2
            [platform] => Instagram Direct Messaging
            [date] => 2016/11/30
            [time] => 2:00
            [ampm] => PM
            [specialcontent] => none
            [content] => Hello?
        )

    [6] => Array
        (
            [id] => 7
            [from] => Person 2
            [to] => Person 1
            [platform] => Instagram Direct Messaging
            [date] => 2016/12/01
            [time] => 3:00
            [ampm] => PM
            [specialcontent] => none
            [content] => Sorry, I'm traveling 'till next year.
        )

    [7] => Array
        (
            [id] => 8
            [from] => Person 1
            [to] => Person 2
            [platform] => Instagram Direct Messaging
            [date] => 2016/12/05
            [time] => 1:00
            [ampm] => PM
            [specialcontent] => none
            [content] => Fine by me.
        )

    [8] => Array
        (
            [id] => 9
            [from] => Person 2
            [to] => Person 1
            [platform] => Instagram Direct Messaging
            [date] => 2017/01/04
            [time] => 3:00
            [ampm] => PM
            [specialcontent] => none
            [content] => I'm back.
        )

    [9] => Array
        (
            [id] => 10
            [from] => Person 1
            [to] => Person 2
            [platform] => Instagram Direct Messaging
            [date] => 2018/01/15
            [time] => 1:00
            [ampm] => PM
            [specialcontent] => none
            [content] => I'm back too, one year later too.
        )

)

其实际代码是（尽管我实际上是从数据库中的XML文件中创建了先前的数组）：

<?php
    $MessagesArray = array(
        array(
            "id" => "1",
            "from" => "Person 1",
            "to" => "Person 2",
            "platform" => "Instagram Direct Messaging",
            "date" => "2016/11/27",
            "time" => "12:00",
            "ampm" => "AM",
            "specialcontent" => "none",
            "content" => "Hello"
        ),
        array(
            "id" => "2",
            "from" => "Person 1",
            "to" => "Person 2",
            "platform" => "Instagram Direct Messaging",
            "date" => "2016/11/27",
            "time" => "11:00",
            "ampm" => "AM",
            "specialcontent" => "none",
            "content" => "How are you?"
        ),
        array(
            "id" => "3",
            "from" => "Person 2",
            "to" => "Person 1",
            "platform" => "Instagram Direct Messaging",
            "date" => "2016/11/27",
            "time" => "6:00",
            "ampm" => "PM",
            "specialcontent" => "none",
            "content" => "Oh, hey there. I'm fine"
        ),
        array(
            "id" => "4",
            "from" => "Person 2",
            "to" => "Person 1",
            "platform" => "Instagram Direct Messaging",
            "date" => "2016/11/27",
            "time" => "6:01",
            "ampm" => "PM",
            "specialcontent" => "none",
            "content" => "What about you?"
        ),
        array(
            "id" => "5",
            "from" => "Person 1",
            "to" => "Person 2",
            "platform" => "Instagram Direct Messaging",
            "date" => "2016/11/28",
            "time" => "8:00",
            "ampm" => "AM",
            "specialcontent" => "none",
            "content" => "It's been a while."
        ),
        array(
            "id" => "6",
            "from" => "Person 1",
            "to" => "Person 2",
            "platform" => "Instagram Direct Messaging",
            "date" => "2016/11/30",
            "time" => "2:00",
            "ampm" => "PM",
            "specialcontent" => "none",
            "content" => "Hello?"
        ),
        array(
            "id" => "7",
            "from" => "Person 2",
            "to" => "Person 1",
            "platform" => "Instagram Direct Messaging",
            "date" => "2016/12/01",
            "time" => "3:00",
            "ampm" => "PM",
            "specialcontent" => "none",
            "content" => "Sorry, I'm traveling 'till next year."
        ),
        array(
            "id" => "8",
            "from" => "Person 1",
            "to" => "Person 2",
            "platform" => "Instagram Direct Messaging",
            "date" => "2016/12/05",
            "time" => "1:00",
            "ampm" => "PM",
            "specialcontent" => "none",
            "content" => "Fine by me."
        ),
        array(
            "id" => "9",
            "from" => "Person 2",
            "to" => "Person 1",
            "platform" => "Instagram Direct Messaging",
            "date" => "2017/01/04",
            "time" => "3:00",
            "ampm" => "PM",
            "specialcontent" => "none",
            "content" => "I'm back."
        ),
        array(
            "id" => "10",
            "from" => "Person 1",
            "to" => "Person 2",
            "platform" => "Instagram Direct Messaging",
            "date" => "2018/01/15",
            "time" => "1:00",
            "ampm" => "PM",
            "specialcontent" => "none",
            "content" => "I'm back too, one year later too."
        )
    );
?>

我想以某种方式使用一个自动创建HTML的代码，例如以下示例：

<div class="year">
  2016
  <div class="month">
    Month 11
    <div class="day">
      Day 27
    </div>
    <div class="day">
      Day 28
    </div>
    <div class="day">
      Day 30
    </div>
  <div class="month">
    Month 12
    <div class="day">
      Day 01
    </div>
    <div class="day">
      Day 05
    </div>
  </div>
  </div>
</div>
<div class="year">
  2017
  <div class="month">
    Month 01
    <div class="day">
      Day 04
    </div>
  </div>
</div>
<div class="year">
  2018
  <div class="month">
    Month 01
    <div class="day">
      Day 15
    </div>
  </div>
</div>

如您所见，这真的不是那么困难，我在弄清楚如何使用嵌套的foreach函数时遇到了问题。

代码应为每个唯一的年份生成一个<div> HTML元素，然后为该年的每个唯一月份生成其相应的<div> HTML元素，然后同时生成其相应的{{1} }该年当月每个月的HTML元素。

我认为我们需要使用嵌套的<div>函数。假设我们有代码foreach，然后在函数内部，我们可以分别将年，月和日分别设置为$ foreach ($MessagesArray as $item) {}，year = substr($item['date'], 0, 4);和$month = substr($item['date'], 5, 2);。我还认为我们需要有人知道上一次迭代的价值。

Answer 1

是的，您将需要编写了解上一行数据的代码。这可以通过一个循环和一些逻辑定位的条件语句来完成。

代码：（Demo）

$MessagesArray = [
    ["date" => "2016/11/27"],
    ["date" => "2016/11/27"],
    ["date" => "2016/11/27"],
    ["date" => "2016/11/27"],
    ["date" => "2016/11/28"],
    ["date" => "2016/11/30"],
    ["date" => "2016/12/01"],
    ["date" => "2016/12/05"],
    ["date" => "2017/01/04"],
    ["date" => "2018/01/15"]
];
$yr = null;
$mo = null;
$dy = null;

foreach ($MessagesArray as $row) {
    if ($row["date"] == "$yr/$mo/$dy") {
        continue;  // if repeat of previous date, move to next iteration
    }
    [$y, $m, $d] = explode("/", $row["date"]);
    if (($m != $mo || $y != $yr) && $mo !== null) {
        echo "</div>";
    }
    if ($y != $yr) {
        if ($yr !== null) {
            echo "</div>";
        }
        echo "<class='year'>$y";
    }
    if ($m != $mo || $y != $yr) {
        echo "<div class='month'>Month $m";
    }
    echo "<div class='day'>Day $d</div>";
    $yr = $y;
    $mo = $m;
    $dy = $d;
}
if (sizeof($MessagesArray)) {
    echo "</div></div>";
}

输出：

<div class='year'>2016
    <div class='month'>Month 11
        <div class='day'>Day 27</div>
        <div class='day'>Day 28</div>
        <div class='day'>Day 30</div>
    </div>
    <div class='month'>Month 12
        <div class='day'>Day 01</div>
        <div class='day'>Day 05</div>
    </div>
</div>
<div class='year'>2017
    <div class='month'>Month 01
        <div class='day'>Day 04</div>
    </div>
</div>
<div class='year'>2018
    <div class='month'>Month 01
        <div class='day'>Day 15</div>
    </div>
</div>

Answer 2

重新格式化数组：

import { bindable } from 'aurelia-framework';

    export class TestInput{
    @bindable query;

    valueChange(newValue, oldValue)
    {
        //Do something
    }
    created(){
        console.log('test component created');
    }
}

然后简单地遍历：

$formatted = [];

foreach ($MessagesArray as $Message) {
    $year = substr($Message['date'], 0, 4);
    $month = substr($Message['date'], 5, 2);
    $formatted[ $year ][ $month ][] = $Message;
}

print_r($formatted);

请参见this php playground。

Answer 3

这是一种幼稚的方法：

$messages = [
    ["date" => "2016/11/27"],
    ["date" => "2016/11/27"],
    ["date" => "2016/11/27"],
    ["date" => "2016/11/27"],
    ["date" => "2016/11/28"],
    ["date" => "2016/11/30"],
    ["date" => "2016/12/01"],
    ["date" => "2016/12/05"],
    ["date" => "2017/01/04"],
    ["date" => "2018/01/15"]
];

$parsed = [];

foreach ($messages as $k => $v) {
    [$y, $m, $d] = explode("/", $v["date"]);
    $parsed[$y][$m][$d] = 1;
}

$html = [];

foreach ($parsed as $y => $v) {
    $html[] = "<div class='year'>$y";

    foreach ($v as $m => $v) {
        $html[] = "<div class='month'>Month $m";

        foreach ($v as $d => $v) {
            $html[] = "<div class='day'>Day $d</div>";
        }

        $html[] = "</div>";
    }

    $html[] = "</div>";
}

echo implode($html);

输出：

<div class="year">2016<div class="month">Month 11<div class="day">Day 27</div><div class="day">Day 28</div><div class="day">Day 30</div></div><div class="month">Month 12<div class="day">Day 01</div><div class="day">Day 05</div></div></div><div class="year">2017<div class="month">Month 01<div class="day">Day 04</div></div></div><div class="year">2018<div class="month">Month 01<div class="day">Day 15</div></div></div>

说明：

在一个循环中解析结构，然后再次在其上循环以生成HTML。请注意，我简化了您的数据结构，但是只要“ date”键存在，它就可以在其他任何数据结构上工作。而且，HTML缩小了但完全相同-如果您想要一个漂亮的版本，那就没什么麻烦了。

还有一个repl。