Laravel API - Vue js axios to display from Json

Question

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 class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <table class="table table-bordered table-striped">
        <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.

@mcanzerini I am getting it like this [ { "id": 5, "name": "Bed", "description": "Single", "quantity": 1, }, { "7": { "id": 8, "product_id": 5, "description": "Wood" }, "8": { "id": 9, "product_id": 5, "description": "Mattress" } } ] (Removed data to meet character limit) — Dynamite
– Dynamite, Commented Apr 8, 2022 at 13:38
sorry my bad, how can I fix this and get the issue resolved? — Dynamite
– Dynamite, Commented Apr 8, 2022 at 13:43
@mcanzerini I changed in the controller to return response()->json(['product'=>$product,'product_materials'=>$product_materials]); Then when I am displaying for product, {{product.product.name}} this works but cannot loop product materials The data that is passing through is { product: {}, product_materials: [{}] } — Dynamite
– Dynamite, Commented Apr 8, 2022 at 13:58

Ahmed Hassan · Accepted Answer · 2022-04-08 14:06:21Z

1

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

answered Apr 8, 2022 at 14:06

Ahmed Hassan

6595 silver badges7 bronze badges

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

3 Comments

Dynamite Over a year ago

Nvm, I feel so dumb for checking everything out and missing one line. Thank you so much, this works!

Ahmed Hassan Over a year ago

@Faizan it's ok these things could be tricky

Dynamite Over a year ago

Now I am getting another issue.. for the /product_details/1 I am getting product: {} and product_materials as [{}] which is fine but for others, lets say /product_details/5 i am not getting the same way.. I am doing dynamic calculations so this is affecting it. I am getting product {} and product_materials { "some number"{}} not as array

corasphinx · Accepted Answer · 2022-04-08 13:32:07Z

0

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

answered Apr 8, 2022 at 13:32

corasphinx

633 silver badges11 bronze badges

4 Comments

Dynamite Over a year ago

This does not work, it shows error "unexpected { before "product" " I did this instead return response()->json(['product'=>$product,'product_materials'=>$product_materials]); no luck

godo57 Over a year ago

try this: response() -> json(array('product' =>$product,'product_materials' =>$product_materials))

Dynamite Over a year ago

I have done this but it won't display product materials in loop..

corasphinx Over a year ago

try this: response() -> json(array(['product' =>$product,'product_materials' =>$product_materials]))

Rohìt Jíndal · Accepted Answer · 2022-04-08 14:08:04Z

0

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>

answered Apr 8, 2022 at 14:08

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

1 Comment

Dynamite Over a year ago

Hello, return response() -> json(array('product' =>$product,'product_materials' =>$product_materials)); when I run for /product_details/1 I am getting product: {}, product_materials:[{}] which is fine but for other IDs /product_details/2 or /product_details/3 I am getting product: {}, product_materials: {"7"{}}.. why is it changing? I am doing dynamic calculations and when the values are passing differently. its affecting it

Collectives™ on Stack Overflow

Laravel API - Vue js axios to display from Json

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related