Accessing a specific attribute of an object contained within an array

Currently, I am utilizing Vue.js in my project and have implemented a method that involves comparing values from two different arrays.


array1:  [{ name: 'test1', somevar: true }, { name: 'test2', somevar: false }]
array2: ['test1', 'test3']

compare() {
    // In this section, my objective is to access an object property within array1
    this.array1.forEach((element) => {
      if(this.array1.element.name.includes(this.array2[0])) {
        // Upon validation, I aim to remove the compared value from array 1
        if(this.array2[0] !== -1) {
          var index = this.array1.element.name.indexOf(this.array2[0])
          this.array1.splice(index, 1)
        }
      }

I have identified a potential issue with this.array1.forEach((element). How can I effectively access the properties of that specific object?

javascriptarraysobjectvue.js

Answer №1

array1 is actually an array, not an object. Therefore, trying to access this.array1.element will not yield the desired result. Instead, simply reference the element as the parameter provided to forEach.

In addition, the function passed to forEach accepts another argument: the second argument specifies the current element's index, eliminating the need to use indexOf.

Furthermore, instead of those adjustments, utilizing filter would be more suitable in this scenario:

const obj = {
  array1:  [{ name: 'test1', somevar: true }, { name: 'test2', somevar: false }],
  array2: ['test1', 'test3'],
  compare() {
    obj.array1 = obj.array1.filter(({ name }) => (
      !obj.array2.includes(name)
    ))
  }
}
obj.compare();
console.log(obj.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

"Looking for a way to automatically close the <li> tag in Vuejs when clicked outside

clickOutside: 0, methods: { outside: function(e) { this.clickOutside += 1 // eslint-disable-next-line console.log('clicked outside!') }, directives: { 'click-outside': { ...

javascriptvue.js

Climbing the ladder of function chains, promises are making their

Here is the code structure that I've created to upload multiple files to a server using AJAX. After all the uploads are complete, it should perform a certain action. function uploadFiles(files){ const results = [] for (let i=0; i<files.length; i ...

javascriptajaxpromise

In nextjs, the page scroll feature stops functioning properly following a redirection

Currently, I am running on version 13.5.4 of Next.js In a server-side component, I am using the nextjs redirect function to navigate to another page. However, after the redirection, I noticed that the next page is missing the scroll bar and seems to be st ...

javascriptreactjsnext.js

Can new content be incorporated into an existing JSON file using HTML input and the fs.writeFile function?

I recently started learning about node.js and decided to create a comment section that is rendered by the node.js server. I successfully passed the value from a json file into an ejs file, which rendered fine. Now, I have added an input field and submit b ...

javascriptnode.jsjsonexpressejs

Acquire the content of an interactive website with Python without using the onclick event

I am looking to extract the content of a dynamically generated website after clicking on a specific link. The link is structured as follows: <a onclick="function(); return false" href="#">Link</a> This setup prevents me from directly accessin ...

javascriptpythononclickurllib2urllib

Using webpack to load the css dependency of a requirejs module

Working with webpack and needing to incorporate libraries designed for requirejs has been smooth sailing so far. However, a bump in the road appeared when one of the libraries introduced a css dependency: define(["css!./stylesheet.css"], function(){ &bsol ...

javascriptcssrequirejswebpack

Design a dynamic top navigation bar in Angular or any other framework that automatically adjusts to the size of the screen, similar to the responsive bookmarks bar in

Could you offer guidance or suggestions on how to design a navigation bar (using Angular 1, jQuery, CSS, etc) that emulates the functionality of Google Chrome bookmarks bar when resizing the page? Essentially, as the page size decreases, a new button/symbo ...

javascriptjqueryhtmlcssangularjs

Identify when a user switches tabs within the browser and when they switch applications away from the

I am interested in understanding the behavior of the tab's visibility state when a user switches tabs in a specific browser and when they switch out of the application entirely (switching away from the browser). var visibilityState, activeTab = ( ...

javascriptjquery

Utilizing the 'PUT' update technique within $resource

Hey there, I'm pretty new to Angular and looking for some guidance on how to implement a PUT update using angular $resource. I've been able to figure it out for all 'jobs' and one 'job', but I could use some assistance with in ...

javascriptangularjs

What is causing the sorting table to fail in React when using useState?

import React, { useState } from "react"; import "./App.css"; const App = () => { const [data, setData] = useState([ { rank: 1, name: "John", age: 29, job: "Web developer", }, { rank: 2, name: "Micha ...

javascriptreactjs

Dynamic Selection of JSON Key-Value Pairs in React Framework

My json data structure resembles the following: { "index": 1, "ln": "27953", "name": "Product 1", "availability": { "day0726": "G", "day0727": "G", "day0728": "G", } } I am looking for a way to dynamically disp ...

javascriptjsonreactjs

Tips on preventing duplication of APIs when retrieving data using nextjs

In my code, I have a function that can be called either from server-side rendering or client side: export const getData = async (): Promise<any> => { const response = await fetch(`/data`, { method: 'GET', headers: CONTENT_TYPE_ ...

javascriptnext.js

Typography Addition on Flexslider

I am currently working with flexslider and trying to incorporate a unique text overlay on each individual slide, but so far I have been unsuccessful. <div class="flexslider"> <ul class="slides"> <li> <img src ...

javascripthtmlflexslider

Passing down slots to child components in Vue allows for flexible and dynamic content

I am looking to create a reusable Data Table component using Vuetify. Some columns may require the use of v-slot to modify the data displayed within that specific column. For example, I have user roles stored as integers and want them to be shown as either ...

vue.js

Developing and integrating views within a node-webkit desktop application

For my file copier desktop application built with node webkit, I aim to create a seamless flow where the initial check for existing profile data determines the first page displayed. The header with static links/buttons to various views remains consistent ...

javascripthtmlcssnode.jsnode-webkit

Why does the value become "Undefined" once it is passed to the controller function?

I am unsure why the console.log function returns "undefined". $scope.onSizeSelected = function(productId, sizeQtyPrice){ console.log('The selected size is: ' + sizeQtyPrice); $scope.updateSelectedProductBySizeSelected(productId ,sizeQtyPrice ...

javascriptangularjsng-controller

Is the && operator being utilized as a conditional statement?

While following a tutorial, I came across this code snippet that uses the 'and' operator in an unusual way. Is this related to React? Can someone provide an explanation or share documentation that clarifies it? {basket?.length > 0 && ...

javascriptreactjs

Using AJAX in jQuery to toggle the visibility of rows in a table with the each

Currently, I am working on an MVC 5 application where I am attempting to utilize a script to toggle the visibility of buttons in each row based on data retrieved from a database using Ajax. function setButtons() { $('#MyList > tbody > ...

javascriptjqueryajaxasp.net-mvc-4

I am eager to create a Material-UI textfield using an array

My current task involves utilizing TextField based on an Array, but I am facing an issue with dynamically changing all the values. I understand that I can employ ternary conditions to accomplish this task effectively. const TextField = () => { r ...

javascriptreactjsmaterial-ui

Navigating to a new URL after submitting a form in React

Hello, I am new to React and have created a form that successfully sends data to Firebase. However, after submitting the form, I would like to redirect to /thankyou.html which is outside of the React app. Can someone please guide me on how to achieve this ...

javascriptreactjs