Discover connections between an Array and an array within Objects

Question

Discover connections between an Array and an array within Objects

My blog features various articles that users can interact with. Each user has a property called "favorites," which stores an array of their favorite posts. By clicking on the heart icon next to a post, the title of that post gets added to the user's favorites list.

I want to create a section on each user's profile page where they can view all the posts they've added to their favorites. This involves comparing the user's favorites array to the array of all available posts.


userFavoritesArray = ['post1', 'post2', 'post5', ...]
postsArray = [
  { 
    title: 'post1', 
    desc: 'hello'
  },
  ...
]

For example:


user: {
  favorites: ['post1']
}

posts: [
{name: 'post1', desc: 'yo bro'},
{name: 'post2', desc: 'hello im the post2'},
{name: 'post3', desc: 'good morning'}
]

The desired output for this user would be

favorites: [{name: 'post1', desc: 'yo bro'}]

javascript arrays vue.js object match

Answer 1

Answer №1

Your inquiry lacks clarity, but I presume you are seeking the following solution:

const input = ['a', 'c']
const database = [
  { title: 'a', foo: 1 },
  { title: 'b', foo: 2 },
  { title: 'c', foo: 3 }
]
const output = mapByTitle(database, input)
console.log(output)
// Result: [ { title: 'a', foo: 1 }, { title: 'c', foo: 3 }]

To achieve this, a combination of Array.prototype.find and Array.prototype.map can be utilized. The former finds an element based on a provided condition, while the latter maps array elements according to a specified callback function.

For instance:

// Implementing `find`:
console.log(database.find(item => item.title === 'a'))
// Result: { title: 'a', foo: 1 }
console.log(database.find(item => item.title === 'z'))
// Result: undefined

// Utilizing `map`:
console.log(['hello', 'world'].map(item => item.toUpperCase() + '!'))
// Result: ['HELLO!', 'WORLD!']

Thus, the function mapByTitle can be constructed as follows:

function mapByTitle (database, input) {
  return input.map(title => database.find(item => item.title === title))
}

Answer 2

Your inquiry lacks clarity, but I presume you are seeking the following solution:

const input = ['a', 'c']
const database = [
  { title: 'a', foo: 1 },
  { title: 'b', foo: 2 },
  { title: 'c', foo: 3 }
]
const output = mapByTitle(database, input)
console.log(output)
// Result: [ { title: 'a', foo: 1 }, { title: 'c', foo: 3 }]

To achieve this, a combination of Array.prototype.find and Array.prototype.map can be utilized. The former finds an element based on a provided condition, while the latter maps array elements according to a specified callback function.

For instance:

// Implementing `find`:
console.log(database.find(item => item.title === 'a'))
// Result: { title: 'a', foo: 1 }
console.log(database.find(item => item.title === 'z'))
// Result: undefined

// Utilizing `map`:
console.log(['hello', 'world'].map(item => item.toUpperCase() + '!'))
// Result: ['HELLO!', 'WORLD!']

Thus, the function mapByTitle can be constructed as follows:

function mapByTitle (database, input) {
  return input.map(title => database.find(item => item.title === title))
}

Discover connections between an Array and an array within Objects

Answer №1

Similar questions

Retrieve the corresponding data from a separate workbook based on specific criteria

Update the value of a table cell with jQuery

The AngularJS directive fails to display any content within its element children

Having trouble with sluggish performance on openbim-components? The OrthoPerspectiveCamera tends to slow down or get stuck when zooming

Angular 6 and Typescript: How to Map Objects in Arrays within Arrays

Issue with Jquery focus on dropdown not working

Heroku experiences unexpected surge in memory consumption while using Puppeteer

"Error 404: Issue encountered while trying to save data on Backbone

Express Route will respond with a status code of 500 and a generic error message when a file is sent as 'multipart/form-data'

Using JavaScript with namespaces in C#

Why am I encountering issues accessing a child property in TypeScript?

One issue that may arise is when attempting to use ngOnDestroy in Angular components while rearranging user transitions

What is the method to display a caret in regular HTML text with the use of JavaScript?

Issues with sending data through ajax using the post method persist on shared web hosting

Fixing TypeError: Object #<IncomingMessage> has no method 'flash' in ExpressJS version 4.2

Incorporating sliding animation into Angular's ng-repeat directive

Is it possible for two components to send two distinct props to a single component in a React application?

Guide to incorporating animated material icons in vuetify

The Select2 choices are not being updated correctly

Is it possible for a PHP server script to continuously monitor a non-blocking socket?