Question

我有以下json（但有100页）：

{
  "data":{
     "page":{["x":1,"y":2],["x":1,"y":2],["x":1,"y":2]},
     "page":{["x":2,"y":2],["x":1,"y":2],["x":1,"y":2]},
     "page":{["x":3,"y":2],["x":1,"y":2],["x":1,"y":2]},
  }
}

如何打印带有胡须或车把的以下HTML：

我尝试先执行#page然后执行/＃page以及/ data和#data，但是它不起作用

我要在胡子后打印以下HTML

<div class="page">
    <div class="data">
        <div>x value here></div>
        <div>y value here></div>
    </div>
    <div class="data">
        <div>x value here></div>
        <div>y value here></div>
    </div>
    <div class="data">
        <div>x value here></div>
        <div>y value here></div>
    </div>
</div>
<div class="page">
    <div class="data">
        <div>x value here></div>
        <div>y value here></div>
    </div>
    <div class="data">
        <div>x value here></div>
        <div>y value here></div>
    </div>
    <div class="data">
        <div>x value here></div>
        <div>y value here></div>
    </div>
</div>
<div class="page">
    <div class="data">
        <div>x value here></div>
        <div>y value here></div>
    </div>
    <div class="data">
        <div>x value here></div>
        <div>y value here></div>
    </div>
    <div class="data">
        <div>x value here></div>
        <div>y value here></div>
    </div>
</div>

Answer 1

尝试一下。在语法上对我来说看起来不错。在大多数情况下应该可以使用。我对您的数据进行了一些篡改，认为我认为是正确的。

const vals  = {
  "data":{
    "page1":[{"x":1,"y":2},{"x":1,"y":2},{"x":1,"y":2}],
    "page2":[{"x":2,"y":2},{"x":1,"y":2},{"x":1,"y":2}],
    "page3":[{"x":3,"y":2},{"x":1,"y":2},{"x":1,"y":2}],
  }
};
const { data } = vals; 
Mustache.render((`
<div class="page">
${Object.keys(data).map(v =>
  `<div class="data">
      ${data[v].map((t) => `<div>{{t.x}}</div><div>{{t.y}}</div>`)}
  </div>
</div>`)}`, vals);

用复杂的阵列构建复杂的胡须或车把

1 个答案: