How to render data based on the ID you get from the first HTTP call

Question

I'm fetching a list of products however it does't have the qty values in the response I get back from the first HTTP call therefore I have to make another call to get the qty values of the returned products from the first call.

First HTTP call: --

vm.search = function() {
 itemService.newSearchProducts(searchData)
  .then(function (response) {
     for (var i = 0; i < response.data.Results.length; i++) {      
         vm.getItemStock(response.data.Results[i].product_idField);
     }
     vm.prodData = response.data.Results;
  })
}

Second HTTP call: This call requires the item Id from above to get the right data for specific product.

vm.getItemStock = function (ids) {
    var getstock = {
        SessionId: orderService.baseObj().SessionId,
        ProductIds: [ids]
    }
 itemService.itemStock(getstock)
    .then(function (response) {
      vm.stockQty = response.data.Results[0].qtyField;
    })
}

Second call response, this is the response looks like after success call so this only should show on the table row/column of this item.

<table class="table table-bordered" style="margin-bottom: 0; border: none;">
    <thead>
        <tr>
            <th>Sku</th>
            <th>Product Name</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="res in vm.prodData">
            <td width="20%">{{res.firstCall}}</td>
            <td><a href="#!/item/{{ res.firstCall }}" class="itemName">{{res.nameField}}</a> </td>
            <td>{{ SecondCall }}</td>
            <!--<td><button class="btn btn-success" style="display: block; margin: 0 auto;">Add to basket</button></td>-->
        </tr>

    </tbody>
</table>

How can I render the correct data from the second call to be inline with the first call.

Fixed using the answer below

$q.all(qty).then(function (result) {
    for (var i = 0; i < result.length; i++) {
        quantity.push(result[i].data.Results[0].qtyField);
    }
    for (var j = 0; j < vm.prodData.length; ++j) vm.prodData[j].qtyField = quantity[j];
});

Vivz · Answer 1 · 2017-06-17T05:54:50.257

1

First HTTP call: -- UPDATED WITH THE CORRECT ANSWER

var qty = [];
var quantity=[];
itemService.newSearchProducts(searchData).then(function(response) {
    vm.prodData = response.data.Results;
    for (var i = 0; i < response.data.Results.length; i++) {
        qty.push(vm.getItemStock(response.data.Results[i].product_idField));
    }
$q.all(qty).then(function (result) {
    for (var i = 0; i < result.length; i++) {
        quantity.push(result[i].data.Results[0].qtyField);
    }
    for (var j = 0; j < vm.prodData.length; ++j) vm.prodData[j].qtyField = quantity[j];
});


})

Second HTTP call:

vm.getItemStock = function (ids) {
    var getstock = {
        SessionId: orderService.baseObj().SessionId,
        ProductIds: [ids]
    }
    return itemService.itemStock(getstock);
}

HTML:

<table class="table table-bordered" style="margin-bottom: 0; border: none;">
    <thead>
        <tr>
            <th>Sku</th>
            <th>Product Name</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="res in vm.prodData">
            <td width="20%">{{res.firstCall}}</td>
            <td><a href="#!/item/{{ res.firstCall }}" class="itemName">{{res.nameField}}</a> </td>
            <td>{{ res.quantity}}</td>
            <!--<td><button class="btn btn-success" style="display: block; margin: 0 auto;">Add to basket</button></td>-->
        </tr>

    </tbody>
</table>

edited Jun 17 '17 at 05:54

answered Jun 16 '17 at 13:21

Vivz

6,625
2
17
33

It's not showing the `{{ res.qty }}`, looks like there's no obj `qty` in the `res` loop – MrNew Jun 16 '17 at 18:04
`for (var j = 0; j < vm.prodData.length; ++j)` qty in this loop is undefined. – MrNew Jun 16 '17 at 18:10
looks like `vm.qty[i]` is undefined. – MrNew Jun 16 '17 at 18:54
Can console qty array before vm.prodData = response.data.Results;? – Vivz Jun 16 '17 at 19:10
Yeah the qty array is undefined. – MrNew Jun 16 '17 at 19:13
Try using promises array for your service calls in the loop like this https://stackoverflow.com/questions/21310964/angularjs-q-all – Vivz Jun 16 '17 at 19:38
Tried your new update and the qty in vm.prodData is still undefined, though `quantity[]` is returning the value. `vm.prodData[j].qty = quantity[j];` this line `quantity[j]` is undefined. – MrNew Jun 16 '17 at 19:49
Looks like some async, it needs to wait for the 2nd call to finished before it populates the `qty: value` in vm.prodData. – MrNew Jun 16 '17 at 20:40
Edited my question with the fixed, I moved `for (var j = 0; j < vm.prodData.length; ++j) vm.prodData[j].qty = quantity[j]; })` inside `$q.all().then()` but correct me if im wrong :) – MrNew Jun 16 '17 at 20:42
I I think the problem was because of async execcution , qauntity was becoming undefined outside the functional scope of the promise array. So you moving it inside the then part of the promise object array is correct. – Vivz Jun 17 '17 at 05:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146924/discussion-between-vivz-and-mrnew). – Vivz Jun 17 '17 at 05:50

How to render data based on the ID you get from the first HTTP call

1 Answers1