Question

我正在尝试使用库w3.js的标记w3-repeat来显示具有嵌套对象数组的对象数组。我知道它不是一个主要使用的库，但我是这个东西的新手，我喜欢用于CSS样式的w3.css样式（简单易学）所以我正在尝试用于javascript的w3.js侧。我正在尝试用这样的对象创建一个表：

var myObject = {
    "deliveries" : [
        {
        "state" : "inside",
        "arrive" : "15/09/17 - 15:00",
        "courier" : "courier 1",
        "cli-cust" : [
            {
            "type" : "client",
            "name" : "cli. name",
            "goods" : [
                {"material" : "pasta",
                "qt" : "200"},
                {"material" : "bread",
                 "qt" : "300"},
                {"material" : "oil",
                 "qt" : "1000"}
                ]
            },
            {
            "type" : "customer",
            "name" : "name of customer",
            "goods" : [
                {"material" : "water",
                "qt" : "100"},
                {"material" : "wine",
                 "qt" : "3000"},
                {"material" : "prosecco",
                 "qt" : "2000"}
                ]
            }
        ]
        },
        {
        "state" : "outside",
        "arrive" : "15/09/17 - 16:00",
        "courier" : "courier 2",
        "cli-cust" : [
            {
            "type" : "client",
            "name" : "name of client 2",
            "goods" : [
                {"material" : "notebook",
                "qt" : "10"},
                {"material" : "keyboard",
                 "qt" : "30"}
                ]
            }
        ]
        }
    ]
}

基本上结果应该是这样的表格：现在，我尝试了标签w3-repeat，但似乎适用于第一级数组对象（状态，到达，快递），但不适用于其他对象：
这很好用：

<tr w3-repeat="deliveries">
<td>{{state}}</td>
<td>{{arrive}}</td>
<td>{{courier}}</td>

但对于第二级对象，我尝试使用类似

的东西

<ul w3-repeat="cli-cust">
<li>{{type}}</li>
<li>{{name}}</li>
</ul>

和第三级相似的东西

<ul w3-repeat="goods">
<li>{{material}}</li>
<li>{{qt}}</li>
</ul>

但不起作用：在输出中提供{{type}}，{{name}}，{{material}}，{{qt}}作为文本，似乎无法使用嵌套对象进行循环阵列。我使用w3-repeat="deliveries.cli-cust"和w3-repeat="deliveries.goods"代替w3-repeat="cli-cust"和w3-repeat="goods"获得相同的结果。

我错过了什么或者图书馆不能支持这个功能吗？

编辑24/09/17：库无法解析嵌套对象，因此无法实现请求。

感谢
埃托

Answer 1

w3.displayObject(id,model)无法解析嵌套模型。

例如，你可以有两个w3重复。

<div id='id01'>
    <table>
        <tr w3-repeat="deliveries">
            <td>{{state}}</td>
        </tr>
    </table>

    <ul w3-repeat="customers">
        <li>{{type}}</li>
    </ul>
</div>

这可以通过具有“交付”和“客户”属性的模型来处理。

<script>
    var model = {
        deliveries: [
            { state: "inside" },
            { state: "outside" }
        ],
        customers: [
            { type: "client" },
            { type: "customer" }
        ]
    }
    w3.displayObject('id01', model);
</script>

请注意w3.displayObject()函数对具有w3-repeat属性的所有元素使用相同的模型。

即使w3-repeat元素是嵌套的，也会使用相同的模型，并在每次交付中重复客户。

<div id='id02'>
    <table>
        <tr w3-repeat="deliveries">
            <td>{{state}}</td>
            <td>
                <ul w3-repeat="customers">
                    <li>{{type}}</li>
                </ul>
            </td>
        </tr>
    </table>
</div>

<script>
    w3.displayObject('ido2', model)
</script>

  <script>w3.displayObject('ido2',model)</script.

如果w3.displayObject()函数的代码被黑客入侵，则需要某种方式来指示如何导航嵌套模型。让我们说它看起来像这样：

<ul w3-repeat='deliveries[$i].customers'>

这不是一件容易的事。

使用w3.js库

1 个答案: