I am faced with a particular scenario where I need to make three HTTP requests to a REST API. Once the data is loaded, I have to perform post-processing on the client side.
Here's what I have:
- An array of "brands"
- An array of "materials"
- An array of "fabrics"
The data needs to be filtered in the following way: Starting from the materials array, each material should contain all the brands, and within each brand associated with a material, there should be information about the fabric corresponding to that brand/material. I'm attempting this using nested maps, but encountering issues.
This is a live demo showcasing my attempted solution:
/* JavaScript code here */
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul ng-repeat="material in resultado">
<li>{{ material.Nombre }}</li>
<ul ng-repeat="marca in material.Marcas">
<li>{{ marca.Nombre }}</li>
<ul ng-repeat="tela in marca.Telas">
<li>{{ tela.ID + " - " + tela.Nombre }}</li>
</ul>
</ul>
</ul>
</div>
Despite my efforts, I found that the filter process resulted in 20 out of 50 fabrics being duplicated under the last brand, although they were in the correct order.