Is there a way to compare the values of two arrays of objects and conceal something if a match is found?

I am currently working on a task that involves checking if the values of one array of objects exist in another array of objects. The goal is to disable a table row if the values match. Below are the two arrays of objects I am working with.

const array1 = [
{
id: "8a8080877134b405017134c1adb3004f",
name: "AWS API1"
},
{
id: "8a8080b6720900d301720935a7120000",
name: "AWS API3"
},
{
id: "8a80808271773317017177848a5106d1",
name: "AZURE API1"
}
];

const array2 = [
{
apiId: "8a8080877134b405017134c1adb4444f",
apiName: "AWS API2"
},
{
apiId: "ass34dgdfgfdgfdg35435ERF",
apiName: "AZURE API1"
},
{
apiId: "dfdfdaggfdgdfg4324564",
apiName: "AWS API1"
}
];

In order to achieve my objective, I need to compare the values of 'array1.name' with 'array2.apiName', and disable the table row if they match. How can this be accomplished?

Please refer to the code snippet below for implementation.

const result = array1.filter((element) => !array2.find(({ apiName }) => element.name === apiName));
console.log(result);

Answer №1

You have the option to utilize the some method on both arrays, adding a new property called disable to the first array. If the name in the first array matches the apiName in the second array, set the disable property to true.

In your template, you can then use the disable property to control whether rows are disabled or enabled.

Keep in mind that using the some method will iterate through every element of the first array with each element of the second array, making it a potentially taxing process for large arrays.

var array1 = [
  { id: "8a8080877134b405017134c1adb3004f", name: "AWS API1" },
  { id: "8a8080b6720900d301720935a7120000", name: "AWS API3" },
  { id: "8a80808271773317017177848a5106d1", name: "AZURE API1" }
];

var array2 = [
  { apiId: "8a8080877134b405017134c1adb4444f", apiName: "AWS API2" },
  { apiId: "ass34dgdfgfdgfdg35435ERF", apiName: "AZURE API1" },
  { apiId: "dfdfdaggfdgdfg4324564", apiName: "AWS API1" }
];

array1.some(a1 => {
  array2.some(a2 => {
    if (a1.name === a2.apiName) {
      a1.disable = true;
    } else {
      if (a1.disable !== true) {
        a1.disable = false;
      }
    }
  })
});

console.log(array1);

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

JavaScript Datepicker Formatting

I need to modify the date format of a datepicker. Currently, it displays dates in MM/DD/YYYY format but I want them to be in DD-MM-YYYY format. <input id="single-date-picker" type="text" class="form-control"> Here's the JavaScript code: $("# ...

Troubles with Node and TypeScript: inability to detect jQuery

I'm currently facing some challenges with node and typescript that are causing issues in my Visual Studio 2015 projects. In the solution, I have two projects named Web and WebAPI. Both projects have node.js installed, each with their own node_modules ...

Accessing the system through a pop-up window with the help of AJAX and

As a newcomer to the world of AJAX, I must admit that I may have jumped into this field with too much enthusiasm. For several days now, I have been struggling to integrate AJAX with my PHP script. Before dismissing this question as a duplicate, please unde ...

"Is there a way to instruct a Kafka client to process messages in the order in which they were

Currently, I am utilizing Kafka client version 2.4.4 for message consumption. const { Kafka, logLevel } = require("kafkajs") const kafka = new Kafka(config) const consumer = kafka.consumer({ groupId: "Default" }) await consumer.connect ...

Using useState props in React Native navigation screens with React Navigation

I'm currently working on my first React Native app with react navigation after previously having a background in web react development. In the past, I typically used useState for managing state. For instance, rendering a list of components based on d ...

What are the steps to successfully implement "Pointermove" event delegation in Safari iOS for parent/child elements?

I've encountered an issue that I'm struggling to find a solution for. My goal is to implement an event delegate using pointermove on a parent container, and I need to be able to detect when the event transitions between a child element and the pa ...

Creating a dropdown button with three dots in a table row using jQuery

I've been working with tables and I'm trying to create a dropdown list with 3 dots in each table row. I've experimented with a few libraries and custom dropdown options, but none of them seem to be working properly. What I'm looking fo ...

Is it possible to modify the geometry in Three.js to match the texture?

Currently, I am immersed in a Three.js project that involves integrating multiple images into a 3D space. My approach so far has been to directly use these images as textures on planes. However, the challenge lies in the fact that these images vary in heig ...

The server is taking too long to respond, resulting in a 504 Timeout error

I currently have an Angular frontend paired with a .NET CORE backend. The issue I am experiencing is related to a specific request that is resource-intensive and takes a significant amount of time to complete. Whenever I check the browser console, I receiv ...

What is the reason for the inability to access a global variable type variable outside of the $.each function when used within the $

While analyzing a code snippet, I came across an issue with a variable causing an error. function call(data) { $.each(data, function(index, value) { var ddlId = 'ddlCat' + data[index].docId; var html = '<tr id="supp_doc_row_&ap ...

attempting to access a variable which was initialized within a function in different sections of the code base

My goal is to retrieve a variable created within a function that is nested in a resize event parameter in jQuery. This variable should be dynamically updated each time the user resizes the browser window. I intend to utilize this variable to set the width ...

Error: The variable $traceurRuntime has not been defined in the AngularJS application

Currently, I am utilizing [gulp-traceur][1] to convert es6 to js within my angularjs application (version 1.x). However, when attempting to compile a for loop, an error occurs: ReferenceError: $traceurRuntime is not defined It appears that I may need to ...

Customize image position based on div width using jQuery and CSS

I am dealing with dynamic input sourced from a JSON feed that populates a div with different names of varying lengths. Within this setup, there is an image positioned absolutely, and I need to adjust the CSS left value of the image dynamically based on th ...

I am having trouble with my jQuery wrap function and it is not functioning correctly

I'm having trouble with implementing the jQuery wrap function. (function ($) { $.fn.customWrap = function () { applyWrapper(this); return this; }; function applyWrapper($element) { var $input = $('<input&g ...

The ng-content directive fails to display the component containing the host attribute

I can't figure out why ng-content isn't displaying the component with a host attribute. When inspecting the generated HTML DOM, the attribute is present in the host tag but ng-content doesn't have any children. @UPDATE: Following @Naren M ...

Ensure the calling object is retained during the resolution of an Angular promise

Identifying the Issue One issue arises when resolving promises in Javascript: the context switches to Window #. This means that referring back to the object resolving the promise becomes tricky because I can't access or modify its variables. The com ...

Incorrect response received from jQuery Ajax

I'm facing an issue with the jQuery ajax function in my code: var arrayIdEq = JSON.stringify(iditem); $.ajax({ type: "POST", url: "index.php", dataType : 'text', contentType: 'application/json; chars ...

Is there a way for me to retrieve the data returned from a worker thread?

In my quest to understand how worker-threads function, I've come across this useful example: https://github.com/heroku-examples/node-workers-example.git REMINDER: Ensure Redis is installed and running for this example My primary challenge lies in r ...

Developing a TypeScript NodeJS module

I've been working on creating a Node module using TypeScript, and here is my progress so far: MysqlMapper.ts export class MysqlMapper{ private _config: Mysql.IConnectionConfig; private openConnection(): Mysql.IConnection{ ... } ...

Personalized Facebook Share Dialog - unique title and description

I need to send a link using the FB Send Dialog with custom name and description. FB.ui({ method: 'send', name: 'Custom name', display: 'popup', link: 'http://link.com', to: facebookUserId, description: 'Custom ...