Exploring ways to utilize array.find by comparing it to a different object

Question

Exploring ways to utilize array.find by comparing it to a different object

There are two arrays in JavaScript named designs and articles.

var designs = [
    {
        design_id:"bwbmbqlujurv", article_id:14782, name:"adidas demogorgon black"

    }, 
    {
        design_id:"lg9yba2gkcwr", article_id:14782, name:"harry potter wand"

    }, 
    {
        design_id:"ztvx3yikkkyx", article_id:5570, name:"hogwarts map"
    }, 
    {
        design_id:"hlzd4afi9en5", article_id:5570, name:"lannister lion"
    }, 
    {
        design_id:"sdwererefwff", article_id:14782, name:"pokemon bulbasaur"
    },
];

var articles = [
    {
        article_id:6508, dsn_shared_art_id:null, name:"tee man two sides"
    },
    {
        article_id:13510, dsn_shared_art_id:null, name:"tee woman two sides"
    },
    {
        article_id:5570, dsn_shared_art_id:null, name:"necktie"
    },
    {
        article_id:14782, dsn_shared_art_id:null, name:"sweetwear with hood"
    },
]

I am trying to access the value of the first element in the array articles that meets the following conditions:

article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id

The .find method is not working as expected:

this.designs.forEach(function(design) {
    var $artdata = this.articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
    console.log($artdata);//undefined
}.bind(this));

How can I correct this issue?

javascript arrays vue.js

Answer 1

Answer №1

Everything is running smoothly for me:

var designs = [
    {
        design_id:"bwbmbqlujurv", article_id:14782, name:"adidas demogorgon black"

    }, 
    {
        design_id:"lg9yba2gkcwr", article_id:14782, name:"harry potter wand"

    }, 
    {
        design_id:"ztvx3yikkkyx", article_id:5570, name:"hogwarts map"
    }, 
    {
        design_id:"hlzd4afi9en5", article_id:5570, name:"lannister lion"
    }, 
    {
        design_id:"sdwererefwff", article_id:14782, name:"pokemon bulbasaur"
    },
];

var articles = [
    {
        article_id:6508, dsn_shared_art_id:null, name:"tee man two sides"
    },
    {
        article_id:13510, dsn_shared_art_id:null, name:"tee woman two sides"
    },
    {
        article_id:5570, dsn_shared_art_id:null, name:"necktie"
    },
    {
        article_id:14782, dsn_shared_art_id:null, name:"sweetwear with hood"
    },
]


designs.forEach(function(design) {
var $artdata = articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
console.log($artdata);//undefined
}.bind(this));

I have a feeling that your issue could be related to the this context. Give an arrow function a try instead,

designs.forEach(design => ... )

Answer 2

Everything is running smoothly for me:

var designs = [
    {
        design_id:"bwbmbqlujurv", article_id:14782, name:"adidas demogorgon black"

    }, 
    {
        design_id:"lg9yba2gkcwr", article_id:14782, name:"harry potter wand"

    }, 
    {
        design_id:"ztvx3yikkkyx", article_id:5570, name:"hogwarts map"
    }, 
    {
        design_id:"hlzd4afi9en5", article_id:5570, name:"lannister lion"
    }, 
    {
        design_id:"sdwererefwff", article_id:14782, name:"pokemon bulbasaur"
    },
];

var articles = [
    {
        article_id:6508, dsn_shared_art_id:null, name:"tee man two sides"
    },
    {
        article_id:13510, dsn_shared_art_id:null, name:"tee woman two sides"
    },
    {
        article_id:5570, dsn_shared_art_id:null, name:"necktie"
    },
    {
        article_id:14782, dsn_shared_art_id:null, name:"sweetwear with hood"
    },
]


designs.forEach(function(design) {
var $artdata = articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
console.log($artdata);//undefined
}.bind(this));

I have a feeling that your issue could be related to the this context. Give an arrow function a try instead,

designs.forEach(design => ... )

Answer 3

Answer №2

Consider exploring a different approach like the example provided below:

let current = this;
current.designs.forEach(function(design) {
    let artdata = current.articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
    console.log(artdata);
});

The issue at hand revolves around the scope of this. Within the forEach function, this.articles is not accessible hence leading to an undefined error.

Answer 4

Consider exploring a different approach like the example provided below:

let current = this;
current.designs.forEach(function(design) {
    let artdata = current.articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
    console.log(artdata);
});

The issue at hand revolves around the scope of this. Within the forEach function, this.articles is not accessible hence leading to an undefined error.

Answer 5

Answer №3

To simplify your code, remove this from this.designs and this.articles. Also, eliminate .bind(this) as it is unnecessary to bind them with this. Click here to see a working jsfiddle. However, if you are working in vuejs, update your forEach method like this:

this.designs.forEach((design) => {
  var $artdata = this.articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
  console.log($artdata);//undefined
})

Since the scope of this is the inner function in your code, replace that with an arrow function. Alternatively, you can set the value of this outside using let self = this, as suggested in other answers.

Answer 6

To simplify your code, remove this from this.designs and this.articles. Also, eliminate .bind(this) as it is unnecessary to bind them with this. Click here to see a working jsfiddle. However, if you are working in vuejs, update your forEach method like this:

this.designs.forEach((design) => {
  var $artdata = this.articles.find(article => article.article_id == design.article_id || article.dsn_shared_art_id == design.article_id);
  console.log($artdata);//undefined
})

Since the scope of this is the inner function in your code, replace that with an arrow function. Alternatively, you can set the value of this outside using let self = this, as suggested in other answers.

Exploring ways to utilize array.find by comparing it to a different object

Answer №1

Answer №2

Answer №3

Similar questions

Setting the initial date value for an Angular Material md-datepicker to a specific date

Unable to link myxins with Quasar on a worldwide scale

The hover functionality fails to activate when a z-index is applied

How can I determine the size of the custom options dropdown in Magento?

Vitest encountered an issue fetching a local file

Issue: NG04002 encountered post migration from Angular to Angular Universal

What is the best way to extract the last JSON object from a JSONArray based on a specified value

What role does @next/react-dev-overlay serve in development processes?

Utilize CSS styling on dynamically loaded HTML content

Can you explain the functions of this "malicious" JavaScript code?

Click on any checkbox to select all checkboxes at once

Providing secure access to Apostrophe-CMS S3 assets and attachments via HTTPS

Unable to assign an IP address to an Express JS application

Updating View in Angular 2 ngClass Issue

Highlight a pair of words in a phrase using jquery technology

An unexpected 'undefined' value is being added to a particular Web API request

Utilizing a series of linked jQuery functions

Combining vueJS and webpack to bring in fonts, CSS styles, and node_modules into your project

common mistake: using a while loop inside a foreach loop

What is the best way to implement a custom toast delay in a React application using setTimeout