Jede Blöcke für beliebige verschachtelte Arrays

Question

https://svelte.technology/guide#each-blocks gibt ein Beispiel für jede Blöcke zur Ausgabe einer tabellenartige Struktur:

<div class='grid'> 
    {{#each rows as row, y}} 
    <div class='row'> 
     {{#each columns as column, x}} 
     <code class='cell'> 
      {{x + 1}},{{y + 1}}: 
      <strong>{{row[column]}}</strong> 
     </code> 
     {{/each}} 
    </div> 
    {{/each}} 
</div> 

Das Beispiel erfordert diese besondere Struktur:

{ 
    "columns": [ 
    "foo", 
    "bar", 
    "baz" 
    ], 
    "rows": [ 
    { 
     "foo": "a", 
     "bar": "b", 
     "baz": "c" 
    }, 
    { 
     "foo": "d", 
     "bar": "e", 
     "baz": "f" 
    }, 
    { 
     "foo": "g", 
     "bar": "h", 
     "baz": "i" 
    } 
    ] 
} 

Gibt es eine Möglichkeit zu Verwenden Sie diese Funktion, wenn die Spalten nicht vorher bekannt sind, oder noch allgemeiner, wenn jede Zeile eine andere Länge haben könnte? Z.B. (Für letztere):

{ 
    "rows": [ 
    [1], 
    [2, 3, 4], 
    [5, 6] 
    ] 
} 

Ich sehe nicht überall eine Syntax für #each angibt, dass eine Komponente der Daten vor Iterieren „in Reichweite“ kann, wie es war.

Fehle ich etwas oder ist die innere Schleife von diesem unmöglich mit #each? Wenn es unmöglich ist, was sind andere Möglichkeiten, es zu tun? (ZB können Sie eine Funktion verwenden, um über die inneren Arrays zu iterieren und eine sekundäre Vorlage zu verschachteln?)

Answer 1

Ich lerne gerade von der Dokumentation hier, aber was ich Ihnen sagen kann, sollte in der Lage sein, row als behandeln Liste der cell s:

<div class='grid'> 
    {{#each rows as row, y}} 
    <div class='row'> 
     {{#each row as cell, x}} 
     <code class='cell'> 
      {{x + 1}},{{y + 1}}: 
      <strong>{{cell}}</strong> 
     </code> 
     {{/each}} 
    </div> 
    {{/each}} 
</div>