Loop Nested JSON in HTML Table with Vue

Question

I Have a Problem finding way to loop data, I Have Json Data Like This

[
 {
  "STATUS":"CUTTING INHOUSE",
  "STID":"1",
  "CATS":[
     {
        "CAT":"ORIGINALS ",
        "ARTS":[
           {
              "ARTNO":"GY8252",
              "QTY":"3.0"
           },
           {
              "ARTNO":"GY8255",
              "QTY":"23.0"
           }
        ]
     },
     {
        "CAT":"RUNNING",
        "ARTS":[
           {
              "ARTNO":"GW8588",
              "QTY":"3.0"
           },
           {
              "ARTNO":"GW8589",
              "QTY":"45.0"
           }
        ]
     }
  ]
},
{
  "STATUS":"CUTTING SUBCONT",
  "STID":"2",
  "CATS":[
     {
        "CAT":"ORIGINALS ",
        "ARTS":[
           {
              "ARTNO":"GY8252",
              "QTY":"46.0"
           },
           {
              "ARTNO":"GY8255",
              "QTY":"32.0"
           }
        ]
     },
     {
        "CAT":"RUNNING",
        "ARTS":[
           {
              "ARTNO":"GW8588",
              "QTY":"52.0"
           },
           {
              "ARTNO":"GW8589",
              "QTY":"52.0"
           }
        ]
     }
  ]
 },
]

So I Want to Show it on Table

<tbody v-for="i in repdata" :key="i.STID">
  <tr>
    <td align="center" class="stephead" colspan="6">{{ i.STATUS }}</td>
  </tr>
  <tr v-for="j in i.CATS" :key="j.CAT">
    <td>ASDSAD</td>
    <td>{{ j.CAT }}</td>
    <td></td>
    <td>3T</td>
    <td>3</td>
    <td>SMS</td>
  </tr>
  <tr class="totbycat">
    <td colspan="4">Total Qty:</td>
    <td>10</td>
    <td></td>
  </tr>
  <tr class="grandtot">
    <td colspan="4">Grand Total Cutting :</td>
    <td>10</td>
    <td></td>
  </tr>
</tbody>

The Result from my code is still wrong Current Result

I cannot Loop ARTS My Expectation Output is Like My Exspectation Output

I Have try add div before tr but it doesn't work, as I know we cannot put except in table,

please i have confuse to looking for solution

minagawah · Accepted Answer · 2021-03-02 15:11:53Z

1

I see 2 fundamental difficulties implementing your request:

While you want to show subtotal per category, you don't have one in the original data, and you need to somehow process the original data into a new one. Use computed property for this purpose.
You could define a bunch of colspan to show the desired result, but it can be ridiculously complicated. Simply use div with set width for each cell.

Here is a sample implementation in CodePen:
https://codepen.io/mina-tokyo/pen/mdOLxyV

answered Mar 2, 2021 at 15:11

minagawah

952 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loop Nested JSON in HTML Table with Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related