Suppose, I have two json files item-list.json and item-types.json containing items array and item types array separately. Then how to categorize the item list using angularjs? Here is Plunker link: https://embed.plnkr.co/eqL876dwMPxuROkLQ4OP/ Currently there is displaying different lists. But i want to combine both list like this:
Please help. I am new to AngularJS. Thanks in advance
What you want to do is to filter in the view using angular filters:
item in itemsList | filter:{ItemTypeId:itemType.ItemTypeId}
I advise you against using ng-if when not necessary. It will save you lots of performance and sub-scope issues.
IMHO the model manipulation (here mergin 2 JSON files into 1 object) should be done inside the controller, not the view.
To do so, I changed your code to ensure both JSON are got before updating $scope and rendering.
$http({
method: 'GET',
url: "item-types.json"
}).then((types_array) => {
$http({
method: 'GET',
url: "item-list.json"
}).then((items_array) => {
let types = types_array.data.data.reduce( (acc,type) => {
acc[type["ItemTypeId"]] = type["TypeName"];
return acc;
}, {});
$scope.items = items_array.data.data.reduce( (acc,item) => {
let type = types[item["ItemTypeId"]];
if (! (type in acc) )
acc[type] = [];
acc[type].push(item);
return acc;
}, {});
})
});
Then your HTML becomes:
<ol>
<li ng-repeat="(type,items_array) in items">{{type}}
<ul>
<li ng-repeat="item in items_array">
<p>{{item.ItemName}}</p>
<small ng-class="{active:item.IsActive}">{{item.IsActive ?'active' : 'Inactive'}}</small>
</li>
</ul>
</li>
</ol>
I have updated your HTML and get results. PFB new plunkr with just updated HTML code.
