CODEWITHSUNDEEP
jsonvue.js
user1469734
user1469734

Reputation: 801

Make Table Horizontally from JSON in VueJS

How can I make a simpel HTML-table with this JSON:

[
   [
      "",
      "Current",
      "New",
      "AB",
      "DEF",
      "GHI",
      "JL"
   ],
   [
      "Foobar",
      "Aa ",
      "234",
      "44",
      "aax",
      "44",
      "xx"
   ],
   [
      "Row 2",
      "ii",
      "",
      "iik",
      "asd",
      "cc",
      "f"
   ]
]

Each part from the Array should be a column.

Tried this, but not working:

<tbody v-bind:key="index">
                <tr
        v-for="(col, index) in foobar"
        v-bind:key="index"
    >
        <td
            v-for="(row, subindex) in foobar[i]"
            v-bind:key="subindex"
        >
            {{ foobar[index][subindex] }}!
        </td>
    </tr>
</tbody>

What am i doing wrong

Upvotes: 0

Views: 172

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28434

You need to iterate over foobar[index] in the second loop:

new Vue({
  el:"#app",
  data() {
    return {
      foobar: [
        ["", "Current", "New", "AB", "DEF", "GHI", "JL"],
        ["Foobar", "Aa ", "234", "44", "aax", "44", "xx"],
        ["Row 2", "ii", "", "iik", "asd", "cc", "f"],
      ],
    };
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <tbody>
      <tr v-for="(col, index) in foobar" :key="index">
        <td v-for="(row, subindex) in foobar[index]" :key="subindex">
          {{ foobar[index][subindex] }}!
        </td>
      </tr>
    </tbody>
  </table>
</div>

A better version:

new Vue({
  el:"#app",
  data() {
    return {
      foobar: [
        ["", "Current", "New", "AB", "DEF", "GHI", "JL"],
        ["Foobar", "Aa ", "234", "44", "aax", "44", "xx"],
        ["Row 2", "ii", "", "iik", "asd", "cc", "f"],
      ],
    };
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <tbody>
      <tr v-for="(row, index) in foobar" :key="index">
        <td v-for="(col, subindex) in row" :key="subindex">
          {{ col }}!
        </td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions