Laravel API - Vue js axios to display from Json-CodePudding

I am still learning Vue Js and trying to implement using Laravel APIs.

In the Product Controller when I am passing return response()->json($product); and displaying in Vue Js it works. But when I have do it for two - return response()->json([$product, $product_materials]);

I am unable to display

<template>
  <div >
    <div ></div>
    <div >
      <table >
        <tbody>
          <tr style="height: 23px">
            <td style="width: 75px; height: 23px" colspan="5">
              Product Details
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 15.5px; height: 23px">ID</td>
            <td style="width: 14.5px; height: 23px">{{ product.id }}</td>
            <td style="width: 45px; height: 23px" colspan="3">&nbsp;</td>
          </tr>
          <tr style="height: 43px">
            <td style="width: 15.5px; height: 43px">Name</td>
            <td style="width: 14.5px; height: 43px">{{ product.name }}</td>
            <td style="width: 15px; height: 43px">Quantity</td>
            <td style="width: 30px; height: 43px" colspan="2">
              {{ product.quantity }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 15.5px; height: 23px">Description</td>
            <td style="width: 59.5px; height: 23px" colspan="4">
              {{ product.description }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 75px; height: 23px" colspan="5">
              Product Material
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 15.5px; height: 23px">ID</td>
            <td style="width: 14.5px; height: 23px">Description</td>
            <td style="width: 15px; height: 23px">Quantity</td>
            <td style="width: 15px; height: 23px">Rate</td>
            <td style="width: 15px; height: 23px">Amount</td>
          </tr>
          <tr
            style="height: 23.5px"
            v-for="product_material in product_materials"
            :key="product_material.id"
          >
            <td style="width: 15.5px; height: 23.5px">
              {{ product_material.id }}
            </td>
            <td style="width: 14.5px; height: 23.5px">
              {{ product_material.description }}
            </td>
            <td style="width: 15px; height: 23.5px">
              {{ product_material.quantity }}
            </td>
            <td style="width: 15px; height: 23.5px">
              {{ product_material.rate }}
            </td>
            <td style="width: 15px; height: 23.5px">
              {{ product_material.amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">
              Total Material Items
            </td>
            <td style="width: 15px; height: 23px">
              {{ product.material_items }}
            </td>
            <td style="width: 15px; height: 23px">Material Cost</td>
            <td style="width: 15px; height: 23px">
              {{ product.material_cost }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">Waste %</td>
            <td style="width: 15px; height: 23px">
              {{ product.waste_percentage }}
            </td>
            <td style="width: 15px; height: 23px">Waste Amount</td>
            <td style="width: 15px; height: 23px">
              {{ product.waste_amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">Labour cost %</td>
            <td style="width: 15px; height: 23px">
              {{ product.labour_percentage }}
            </td>
            <td style="width: 15px; height: 23px">Labour Cost</td>
            <td style="width: 15px; height: 23px">
              {{ product.labour_amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">&nbsp;</td>
            <td style="width: 30px; height: 23px" colspan="2">
              Equipment Cost
            </td>
            <td style="width: 15px; height: 23px">
              {{ product.equipment_cost }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">Other Cost %</td>
            <td style="width: 15px; height: 23px">
              {{ product.other_percentage }}
            </td>
            <td style="width: 15px; height: 23px">Other Cost</td>
            <td style="width: 15px; height: 23px">
              {{ product.other_amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">Margin %</td>
            <td style="width: 15px; height: 23px">
              {{ product.margin_percentage }}
            </td>
            <td style="width: 15px; height: 23px">Margin Amount</td>
            <td style="width: 15px; height: 23px">
              {{ product.margin_amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="3">&nbsp;</td>
            <td style="width: 15px; height: 23px">Sub Total</td>
            <td style="width: 15px; height: 23px">{{ product.sub_total }}</td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="3">&nbsp;</td>
            <td style="width: 15px; height: 23px">Total</td>
            <td style="width: 15px; height: 23px">{{ product.amount }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    console.log("Component mounted.");
  },
  data() {
    return { product: {}, product_materials: [] };
  },
  created() {
    this.axios
      .get(`/api/products/calculate/${this.$route.params.id}`)
      .then((res) => {
        this.product = res.data;
      });
  },
};
</script>

I just want to know how to fix this and handle this two when passing through json. Thank you in advance.

CodePudding user response：

I will suppose this is your structure

$product =
    [
        'id' => 1,
        'name' => 'product1',
    ];
$product_materials = [
    [
        'id' => 1,
        'name' => 'materials1',
    ],
    [
        'id' => 2,
        'name' => 'materials2',
    ]
];
return response()->json(['product' => $product, 'materials' =>  $product_materials]);

after that axios request should be like this

this.axios
  .get(`/api/products/calculate/${this.$route.params.id}`)
  .then((res) => {
    this.product = res.data.product;
    this.product_materials = res.data.materials;

  });

I hope it's helpful

CodePudding user response：

return response()->json({ "product": $product, "product_materials": $product_materials });

CodePudding user response：

You can achieve it by simply assigning the response data in the respective data properties and then bind that in the template.

Working Demo :

new Vue({
  el: '#app',
  data: {
    product: {},
    product_materials: []
  },
  mounted() {
    const apiResponse = [{
      "id": 5,
      "name": "Bed",
      "description": "Single",
      "quantity": 1
    }, {
      "7": {
        "id": 8,
        "product_id": 5,
        "description": "Wood"
      },
      "8": {
        "id": 9,
        "product_id": 5,
        "description": "Mattress"
      }
    }];
    
    apiResponse.forEach((obj) => {
        if (obj.hasOwnProperty('name')) {
        this.product = obj
      } else {
        Object.keys(obj).forEach((objKey) => {
            this.product_materials.push(obj[objKey])
        })
      }
    });
    
    console.log('this.product', this.product);
    console.log('this.product_materials', this.product_materials);
  }
})

table, th, tr, td {
  border: 1px solid black;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3>Product Details</h3>
  <p> {{ product.name }} </p>
  <p> {{ product.description }} </p>
  <p> {{ product.quantity }} </p>
  
  <h3>Product Material Details</h3>
  <table>
    <tr>
      <th>Product ID</th>
      <th>Description</th>
    </tr>
    <tr v-for="item in product_materials" :key="item.id">
      <td>{{ item.product_id }}</td>
      <td>{{ item.description }}</td>
    </tr>
  </table>
</div>