Построить сложные усы или руль со сложным массивом - PullRequest
Новая
       8

Построить сложные усы или руль со сложным массивом

0 голосов
/ 10 января 2019

У меня есть следующий 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>

1 Ответ

0 голосов
/ 10 января 2019

попробуйте это. синтаксически выглядит хорошо для меня. должно работать в большинстве случаев. Я немного подделал твои данные, и я чувствовал, что это правильно. 

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);
...