Miranda Miranda - 1 month ago 9
JSON Question

ng-repeat is not updating when array is pushed inside scope

i have a web method which is returning json data in every call i am pushing this result into a $scope variable , but inside ng-repeat it is not binding this result . whats wrong with my code . please suggest.
here is my code

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetLocationStockEntries(int LocationId, int ProductId)
{
var jsonText = (dynamic)null;
try
{

if (LocationId > 0)
{
Int64 BusinessUnitId = 0;
using (var db = new repute.Data.ReputEntities())
{
var temp = db.Inventories.Where(p => p.InventoryID == LocationId).FirstOrDefault();
BusinessUnitId = temp == null ? 0 : Convert.ToInt64(temp.BusinessUnitID);
var StockData = db.usp_mvc_InventoryItems_GetAllEntriesByLocation(LocationId, ProductId, BusinessUnitId).Where(x => x.ProjectedQuantityOnHand > 0).ToList();
jsonText = JsonConvert.SerializeObject(new { data = StockData });
}
}
}
catch (Exception ex)
{

}
return jsonText;
}


js :function which is calling this web method evertime and pushing those result into $scope variable

function GetStockEntries(loid, pid)
{
return $http.post(serviceURL + "/GetLocationStockEntries", {LocationId: loid, ProductId: pid }).then(
function success(data, status, headers, config) {
var obj = JSON.parse(data.data.d);
debugger
//$scope.result = obj.data;
$scope.result = obj;
angular.forEach($scope.result, function (key) {
$scope.StockList.push(key);
})

},
function error(data, status, headers, config) {
return data;
});
}


Html:

<table cellpadding="5" cellspacing="0" data-ng-repeat="sTockProduct in ProductList" data-ng-cloak>
<tr>
<td>{{sTockProduct.Name}}
<i class="fa fa-expand" aria-hidden="true" style="color: #000000; text-align: right; margin:5px 0px 0px 10px;" data-ng-click="StockListing(sTockProduct);"></i></td>

</tr>
<tr>
<td>
<table cellpadding="5" cellspacing="0" data-ng-repeat="stockItem in StockList track by $index" data-ng-show = "IsVisible" data-ng-cloak width="100%">
<tr style="border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 5px; float: left;">
<td>
<input type="radio" name="groupName" data-ng-value="true" data-ng-model="stockItem.selected[$index]" data-ng-click="onTaskSelect(stockItem,sTockProduct)" />
</td>
<td>
<input type="text" data-ng-model="stockItem.UserInventoryItemID" disabled="" readonly="" style="border: none; background-color: white;">
</td>
<td>
<input type="text" data-ng-model="stockItem.LotNumber" disabled="" readonly="">
</td>
<td>
<!--<input type="text" data-ng-model="stockItem.QuantityOnHand" disabled="" readonly="">-->
<span>{{stockItem.QuantityOnHand}}</span>
<span>{{stockItem.UnitName}}</span>
</td>
<td>
<input type="text" data-ng-model="stockItem.EnteredQuantity" >
</td>
<td>
<input type="text" data-ng-model="stockItem.Description" disabled="" readonly="">
</td>
</tr>
</table>
</td>
</tr>
</table>


Here is the result of json
enter image description here

Answer

i guess the problem is with you ng-repeat.try some thing like, do check a condition there if some thing similar in both item. in your inner table do

data-ng-if="stockItem.ProductID== sTockProduct.ProductID"

it should be like:

<table cellpadding="5" cellspacing="0" data-ng-repeat="stockItem in StockList track by $index" data-ng-if="stockItem.ProductID == sTockProduct.ProductID" data-ng-cloak width="100%">

and just a slight modification inside your success:

replace :

$scope.result = obj;

to:

$scope.result = obj.data;