What is the best method to find a matching property in one array from another?

Question

What is the best method to find a matching property in one array from another?

I am working with two arrays in TypeScript. The first one is a products array containing objects with product names and IDs, like this:

const products = 
[
    { product: 'prod_aaa', name: 'Starter' },
    { product: 'prod_bbb', name: 'Growth' },
    { product: 'prod_ccc', name: 'Elite' },
];

The second array is a subscriptions array with details of active subscriptions, shown below:

const subscriptions = 
[
    {
        "status":"active",
        "product": "prod_aaa",
        "quantity": 1,
    },
    {
        "status":"active",
        "product": "prod_2342352345",
        "quantity": 1,
    }
];

My goal now is to search the subscriptions array to find the first matching product from the products array, and then display the name of that product (such as Starter/Growth/Elite).

I assume I may need to use subscriptions.filter(), but I am unsure how to extract the name of the matched product.

Although I cannot modify the subscriptions array, I can make changes to the products array if required.

What would be the most effective approach to achieve this task?

By the way, my script is coded in TypeScript.

javascript typescript

Answer 1

Answer №1

Using filter() was mentioned, however, it is more suitable when you need to work with the array it returns. In this case, since you're only interested in the name, utilizing a for loop would be more efficient.

const products = [{
    product: 'prod_aaa',
    name: 'Starter'
  },
  {
    product: 'prod_bbb',
    name: 'Growth'
  },
  {
    product: 'prod_ccc',
    name: 'Elite'
  },
];

const subscriptions = [{
    "status": "active",
    "product": "prod_aaa",
    "quantity": 1,
  },
  {
    "status": "active",
    "product": "prod_2342352345",
    "quantity": 1,
  }
];

function find() {
  for (const product of products) {
    for (const subs of subscriptions) {
      if (product.product === subs.product) {
        return product.name;
      }
    }
  }
}

console.log(find())

Edit: If filter() is preferred, here is an alternative approach:

const products = [{
    product: 'prod_aaa',
    name: 'Starter'
  },
  {
    product: 'prod_bbb',
    name: 'Growth'
  },
  {
    product: 'prod_ccc',
    name: 'Elite'
  },
];

const subscriptions = [{
    "status": "active",
    "product": "prod_aaa",
    "quantity": 1,
  },
  {
    "status": "active",
    "product": "prod_2342352345",
    "quantity": 1,
  }
];

let result = products.filter(prod => {
  return subscriptions.some(sub => prod.product === sub.product)
})[0].name;

console.log(result)

Answer 2

Using filter() was mentioned, however, it is more suitable when you need to work with the array it returns. In this case, since you're only interested in the name, utilizing a for loop would be more efficient.

const products = [{
    product: 'prod_aaa',
    name: 'Starter'
  },
  {
    product: 'prod_bbb',
    name: 'Growth'
  },
  {
    product: 'prod_ccc',
    name: 'Elite'
  },
];

const subscriptions = [{
    "status": "active",
    "product": "prod_aaa",
    "quantity": 1,
  },
  {
    "status": "active",
    "product": "prod_2342352345",
    "quantity": 1,
  }
];

function find() {
  for (const product of products) {
    for (const subs of subscriptions) {
      if (product.product === subs.product) {
        return product.name;
      }
    }
  }
}

console.log(find())

Edit: If filter() is preferred, here is an alternative approach:

const products = [{
    product: 'prod_aaa',
    name: 'Starter'
  },
  {
    product: 'prod_bbb',
    name: 'Growth'
  },
  {
    product: 'prod_ccc',
    name: 'Elite'
  },
];

const subscriptions = [{
    "status": "active",
    "product": "prod_aaa",
    "quantity": 1,
  },
  {
    "status": "active",
    "product": "prod_2342352345",
    "quantity": 1,
  }
];

let result = products.filter(prod => {
  return subscriptions.some(sub => prod.product === sub.product)
})[0].name;

console.log(result)

Answer 3

Answer №2

Instead of following Avneesh's method, I decided to start by going through the subscriptions array.

// Look for the first subscription where the product is also in the products array.

let requiredSub = subscriptions.find(sub => products.some(p => p.product === sub.product))

let requiredProduct = requiredSub.product

For more information on using the Javascript Array.some method, check out the MDN reference - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Answer 4

Instead of following Avneesh's method, I decided to start by going through the subscriptions array.

// Look for the first subscription where the product is also in the products array.

let requiredSub = subscriptions.find(sub => products.some(p => p.product === sub.product))

let requiredProduct = requiredSub.product

For more information on using the Javascript Array.some method, check out the MDN reference - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

What is the best method to find a matching property in one array from another?

Answer №1

Answer №2

Similar questions

I am unable to retrieve values from the req.body object in Node.js

What is the process for inserting a watermark onto an image as it is being retrieved from Firebase?

How to retrieve the value of an element within a facebox div with jquery

How can I organize data from A to Z in alphabetical order in React Native when the user chooses the A to Z option from the dropdown menu?

Strange JSON.parse quirk observed in Node.js when dealing with double backslashes

In node.js, the global variable fails to update within a while loop

Making a column in a Vue data grid return as a clickable button

Prevent removal of h2 tag within a contenteditable segment

Utilizing HTML/CSS with React/Bootstrap: A Comprehensive Guide

Forecast the width of an element using JavaScript

Identifying overflow of text or elements in JavaScript during execution

Having difficulty rendering image in vueJS

How can I incorporate multiple states into a conditional statement in ReactJS?

local individuals and local residents (duplicate) dispatched from the server

What could be causing the custom aside or slide panel to not slide properly when using Angular Strap?

The map function is selectively applied to certain expressions, not all

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

Issues with Rails comments not displaying properly when using ajax requests

Triggering on multiple clicks - MULTIPLE CLICKS

Angular 2's abstract component functionality