Issues with nested array filtering in JS/Angular causing unexpected outcomes

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.

Answer №1

There was an issue with the functionality of the map in 'marcas' for some unknown reason.

To fix it, I created a new variable and made appropriate modifications to solve the problem:

$scope.resultado = $scope.materiales.map(function (material) {
   material.Marcas = $scope.marcas.map(function (marca) {
      var new_var = JSON.parse(JSON.stringify(marca));
      new_var.Telas = $scope.telas_lista.filter(function (tela) {                                
         return tela.Material.ID == material.ID && tela.Marca.ID == marca.ID;
      });
      return new_var;
   });
   return material;
});

Answer №2

It is essential to remember to also include merca.Telas in the return.

material.Marcas = $scope.marcas.map(function(marca){
  return marca.Telas = $scope.telas.filter(function(tela){
    return tela.Material.ID == material.ID && tela.Marca.ID == marca.ID;
  });
  return marca;
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

php send back a JSON containing an error message using AngularJS

I am a beginner with PHP and AngularJS, I have written some PHP code that can return JSON data in the following format: {id:10, sessionName:99, computer:99, quality:LAN(very fast), networkAuthentication:Disable,…} {id:13, sessionName:55, computer:55, q ...

"Enhance your gaming experience with Three JS special effects

I'm in the process of creating a multiplayer web game using Three JS. So far, I have successfully implemented the game logic on both client and server sides, mesh imports, animations, skill bars, health bars, and the ability for players to engage in c ...

NPM issue: unable to locate module 'internal/fs' in Node.js

Encountering NPM error after updating to Node version 7.x. npm is now non-functional and the cause remains unidentified. Possible reason for the issue could be - npm ERR! Cannot find module 'internal/fs'. The output generated when execu ...

Hold off until the script is successfully downloaded and executed, then patiently wait for the DOM to finish loading

I'm facing a challenge with running Javascript conditionally without it being in requirejs form. The script is located on the same server/domain as the requesting page, where an ajax call needs to be made. Is there a foolproof way to ensure that an a ...

Connecting Node.js and Express with MySQL database

Today is my first time working with Node (Express) js, and I'm attempting to connect to a MySQL database. Here is the code snippet I found for my app.js file. app.js var express = require('express'), mysql = require('mysql'); // ...

Performing mathematical operations in JavaScript, rounding to the nearest .05 increment with precision up to two

Apologies in advance. After reviewing multiple posts, it seems like the solution involves using the toFixed() method, but I'm struggling to implement it. $('.addsurcharge').click(function() { $('span.depositamount&ap ...

Break down the key:value objects into individual arrays

I'm currently working on an ionic project that involves handling an incoming array composed of key:value objects such as the one shown in the image below: https://i.stack.imgur.com/qrZiM.png My question is, can these values be separated into three d ...

Issue with scrolling functionality on dynamically inserted items in jQuery mobile list

I have encountered an issue where the scrolling on my page is not working properly after dynamically adding jQuery mobile list items using jQuery ajax response object. The function responsible for handling AJAX success looks like this: success: function( ...

The created function in VueJS may sometimes result in an undefined outcome

I recently started a project with VueJs where I encountered an issue while making a GET request using the Axios library. The data was returned as expected, but I faced difficulties calling the loadUsers function inside mounted. Here is my code snippet: ex ...

How to simulate a particular class from a node package using Jest mocks

In my project, I'm looking to specifically mock the Socket class from the net node module. The documentation for this can be found here. Within my codebase, there is a class structured similar to the following... import { Socket } from 'net&apo ...

Expanding the capabilities of the JQuery submit function

Within my web application, I find myself working with several forms, each possessing its own unique id. To streamline the process, I decided to create a custom handler for the submit event in my JavaScript file: $('#form-name').submit(function(ev ...

Is it possible to incorporate a combination of es5 and es2015 features in an AngularJS application?

In my workplace, we have a large AngularJS application written in ES5 that is scheduled for migration soon. Rather than jumping straight to a new JS framework like Angular 2+ or React, I am considering taking the first step by migrating the current app to ...

Transmitting special symbols through Socket.io

I've been working on a small project based on Socketio 0.9 and everything is running smoothly, except for a minor problem with special characters. In the web client, I am creating a dynamic JSON object using JavaScript that is then emitted to the ser ...

Leveraging TypeScript to sort and extract specific elements from two arrays

Given two arrays, I am looking to identify the elements in array2 that match elements in array1 based on a specific property. The arrays are structured as follows: var array1 = [ {"myId": 1, "text": "a"}, {"myId& ...

Error encountered in CasperJS due to modifications made using WinSCP

I am facing an issue with a casperjs script: var casper = require('casper').create(); console.log("casper create OK"); casper.start("https://my-ip/login_page.html", function() { console.log("Connection URL OK"); // set a waiting condi ...

Developing a dynamic web application using the Django framework along with the Vue.js library and Highcharts for

I am currently working on a data visualization web app using Django, Highcharts, and JQuery. I have recently transitioned from JQuery to Vue JS and I am struggling with fetching JSON data from a specific URL. Below is the code snippet: Template <!doc ...

Display content in a div after the page is fully loaded with either a placeholder or animated loading

Hello everyone, this is my first post on here. I am relatively new to PHP, so any help or advice would be greatly appreciated. ...

arrange the elements in a specified sequence

I am trying to sort an array in a specific order var customOrder = { "1st Presentation / Meeting": 0, "Follow-On Meetings": 1, "Hold\/Uncategorized": 2, "MGL": 3, "PGL": 4, "BGL": 5, "RGL": 6, "SGL": 7, "Uncategorized Leads": 8, ...

JavaScript is unable to identify the operating system that is running underneath

Even though I am on a Windows system, the browser console is showing that I am using Linux. function detectOS() { const userAgent = navigator.userAgent.toLowerCase(); if (userAgent.includes('win')) { return 'Windows' ...

Utilize vue.js input field to search for a specific username within a constantly updating list of users

I have created an input search functionality to filter a list of users using PHP. Now, I am attempting to implement the same filtering feature in Vue.js so that when a user searches for a name, the filtered user will be displayed in the list. Below is the ...