Is it possible to compare two arrays of objects in Angular 7 when one property is an array as well?

I am facing a challenge with two arrays in my code. The first array is a jobs array of objects that contains an array itemIds. Here is an example:

jobs: [{
        name: null
        id: 612
        items: []
        stat: 1
        itemIds: [223, 1234]
    },
    {
        name: null
        id: 734
        items: []
        stat: 2
        itemIds: [564]
    }
    .
    .
    .
]

The second array is the items array, structured like this:

items: [{
        act: true
        id: 1234
        name: "Item1"
    },
    {
        act: true
        id: 222
        name: "Item2"
    },
]

I need to filter out an array of items whose id doesn't match any of the itemIds from the jobs array or if the property 'stat' from the jobs array isn't equal to 0. I have attempted to solve this issue using three loops but it only removes one item with the same id in the jobs array. Any assistance on how to approach this problem would be highly appreciated.

Answer №1

Using the Array.filter method, we can iterate through each element in the items array and create a new array that only contains the items we want to retain.

We will check if any job in the itemIds array contains the specified id. This involves looping through each job and examining the associated ItemsIds values.

The Array.some function terminates as soon as it finds a match.

const jobs = [{
    name: null,
    id: 612,
    items: [],
    stat: 1,
    itemIds: [223, 1234],
  },
  {
    name: null,
    id: 612,
    items: [],
    stat: 2,
    itemIds: [223, 1234],
  },
  {
    name: null,
    id: 734,
    items: [],
    stat: 2,
    itemIds: [564],
  }
];

const items = [{
    act: true,
    id: 1234,
    name: 'Item1',
  },
  {
    act: true,
    id: 222,
    name: 'Item2',
  },
];

const filteredItems = items.filter(x => jobs.some(y => y.itemIds.includes(x.id) && y.stat !== 1));

console.log(filteredItems);

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

Is it possible to automatically close the modal by clicking outside of it

How can I make sure that my modal box only closes when clicking outside of it, and not when clicking on the buttons inside? I have a ref to the parent element that successfully closes the modal on click outside, but currently it also closes if I click on t ...

My attempts to utilize the input tag alongside Three.js have been unsuccessful

Currently delving into game development with Three.js, I'm utilizing the Web GL renderer to take over the entire browser window. A new challenge has arisen as I attempt to incorporate a chat box within this setup. To achieve this, I've placed an ...

Enhance the clarity of content within an IFrame by sharpening the focus on

I recently developed an iframe to open a chat site I built using React.js and Tailwind. The iframe is loaded dynamically on the website through javascript. However, I noticed that when I click on the input field inside the iframe, the content appears blurr ...

What sets observable.throw apart from service.subscribe().error?

Can you explain the contrast? this.ApiService.getList().catch((e, c) => { return Observable.throw(e); }) .subscribe() => {} to this one this.ApiService.getList().subscribe(() => {}, error => {notifyService.showError(error._body); }) ...

Is there a way to determine when all Angular commands have finished executing through Javascript?

I have been using the following code to determine when my webpage has finished loading, however, it seems like there might be an issue. It appears that the Angular components are not yet executed even when the document.readyState is complete: page.ope ...

Arranging Angular Array-like Objects

I am in possession of an item: { "200737212": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "nice ...

The getter function is called before the v-if directive in the child slot component

I have developed a Vue component that needs to perform certain logic and based on that logic, I want to render the content inside the slot. <logic-component> <div>{{ data }}</div> </logic-component> The data is retrieved using a ...

AngularJS: monitoring changes in an array property

For the problem at hand, take a look at this link: http://plnkr.co/edit/ZphAKvZeoVtuGFSEmOKg?p=preview Imagine you have an array structured like this: var arr = [ { 'a': "123", 'b': "654" }, { 'a': "456", &apo ...

What is the reason behind the execution of componentDidMount occurring after componentWillUnmount?

I have been exploring the differences between componentDidMount and componentWillUnmout by experimenting with the following code: class App extends React.Component { constructor(props) { super(props); this.state = { name: "", ...

The multi-level navigation bar is not displaying properly

I am currently facing an issue with my Mega menu. It displays two levels of menus perfectly fine, but I need to add a third level as shown in the image below. However, when I try to include the third level, it disrupts the design and causes the Grand Child ...

Guide on developing and releasing a Vuejs component on NPM

I have been diving deep into vue lately and incorporating it into all of the projects at my workplace. As a result, I have developed various components, particularly autocomplete. Although there are plenty of existing options out there, none seem to fulfil ...

How can I write the code to enable dragging the button for navigating to the next page?

<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)" aria-selected="undefined"> IPD</a> If I want the button to navigate to the next page when dragged, what code should I write? ...

Is it possible for JavaScript code to access a file input from the terminal?

When I run the command cat input.txt | node prog.js >result.txt in my terminal, I need to use an input file. This is my code: var fs = require('fs'); var str = fs.readFileSync('input.txt', 'utf8'); str.replace(/^\s* ...

Ways to provide input parameters to a method upon clicking an element without using the HTML onclick attribute

Is there a way to pass data between pages without redirecting to the next.php page every time a button is clicked? One suggestion is to remove the onclick attribute from the button: <button class="submit-btn"></button> and use this jQuery fu ...

Leveraging AngularJs by binding ng-model to data from a JSON

Below is the code for a dropdown selection: <h3>Selectize theme</h3> <p>Selected: {{produk.category}}</p> <ui-select ng-model="produk.category" theme="selectize" ng-disabled="disabled" style="width: 300px;"> <ui-se ...

Issue with updating bookmark symbol after delete, experiencing error 500 in AJAX on Rails

Seems like the bookmark is being destroyed, but there's a problem causing an error 500 in the console and preventing the bookmark from being unselected. This issue arises when I update the page, indicating that it is indeed being destroyed, but for so ...

Guide to highlighting specific words with color in a text using React JS

I'm currently working on a text area that contains specific words (for example, they may start or end with "%", such as %QWERTY%). I want these words to show up in a different color (like green) while still keeping the text area editable. I've tr ...

Efficiently Manipulating Arrays in JavaScript

After reading a .csv file and saving it to an array, I encountered the following array structure: var data = [["abc;def"],["ghi;jkl"], ...] The strings within the nested arrays are separated by semicolons. In order to work with this da ...

Tips for accurately dissecting a PDF document to determine the status of checkboxes

Looking for a solution to parse PDF forms on the server side, I have experimented with various node.js modules including pdf2json, hummus, and node-pdftk. While I have successfully retrieved all text fields, I am facing issues when it comes to extracting c ...

Print the content from the selected tab in AngularJS UI tab

In my AngularJS application, I have implemented nested tabs and encountered an issue. I am trying to enable users to print the selected content list from both parent and child tabs. Is there a way to achieve this so that when a user clicks on "print list ...