javascript - 如何根据第一次 HTTP 调用获取的 ID 呈现数据

Question

我正在获取产品列表，但它在我从第一个 HTTP 调用返回的响应中没有数量值，因此我必须再次调用才能获取数量值第一次调用后退回的产品数量。

第一次 HTTP 调用:--

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;
  })
}

第二次 HTTP 调用:此调用需要上面的商品 ID 才能获取特定产品的正确数据。

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;
    })
}

第二次调用响应，这是成功调用后的响应，因此这只应显示在该项目的表行/列上。

<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>

如何渲染第二次调用中的正确数据以与第一次调用内联。

使用下面的答案修复

$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];
});

Answer 1

第一次 HTTP 调用:--更新了正确的答案

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];
});


})

第二次 HTTP 调用:

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>