When trying to locate an item in an array within a VUE application, it may result in

I've got this code snippet that successfully finds the item details in an array:

var findGroupId = medias.find(medias => medias.group_name === this.groupName)

The medias variable is an array. When I run console.log(findGroupId), I get this result:

https://i.stack.imgur.com/e5EXE.png

However, when I try 

console.log(findGroupId.group_id)
, it returns undefined. Interestingly, when following the example on this page under Using ES2015 arrow function and running the demo on JavaScript Demo: Array.find(), everything works perfectly. Am I overlooking something here?

Here's a sample of the output array (retrieved from a database): https://i.stack.imgur.com/oBwi5.png PS: I'm trying to avoid using a for loop to optimize memory and time.

javascriptarraysvue.js

Answer №1

When using an arrow function, the keyword `this` could potentially refer to the document rather than the object itself. A solution is to save the value of <code>this.groupName
in a local variable and utilize that in your condition.

let groupName = this.groupName;
let findGroupId = medias.find(media => media.group_name === groupName);

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

Using Puppeteer and Scrapy, this innovative Web Crawler with Scraper combines the power of both

As a newcomer to web technologies, I am faced with the task of crawling and scraping numerous websites that utilize a combination of React, JavaScript, and HTML. These sites collectively contain approximately 0.1 to 0.5 million pages. My plan is to use Se ...

javascripthtmlreactjsseleniumscrapy

Downloading EJS File instead of Displaying on Express.js Router

As I embark on the journey of developing a live video sharing/watching feature using Pure Node.js and without relying on any frameworks, an unexpected issue arose in the middle of the process. The problem occurred when Express started downloading an EJS fi ...

javascriptnode.jsexpresssocket.ioejs

Sending a post request with data to an ExpressJS server resulted in a 404 error indicating that the server

My setup includes a React frontend communicating with my own ExpressJS API backend running version 4.16.0. Currently, using the fetch method in the React frontend to retrieve data is functioning properly: fetch('/desResData') .then(res = ...

javascriptnode.jsreactjsexpress

Script in Google Sheets that removes rows based on specific cell values and arrays

Having difficulty creating a script to delete corresponding rows on another sheet. I'm looking for a solution that can delete matching entries from both Sheet 1 (Supplier and Jobs) and Sheet 2. The challenge lies in the fact that some Jobs may match w ...

arraysgoogle-apps-scriptgoogle-sheetsrows

Ways to avoid browser refresh when uploading files in React applications

I'm working with a simple file upload form in React using hooks. import React, { useState } from 'react'; import { FlexContainer } from '@styles/FlexContainer'; const TestUpload = () => { const [file, setFile] = useState<F ...

javascriptreactjswebpack

Discovering the correct location within a complex JSON or array to perform updates using JavaScript (either AngularJS or vanilla JavaScript

I am currently facing a challenge where I need to search for a specific value within my complex JSON array and then update the corresponding object. Here is a snippet of my JSON array: var myArray = [{ "id": 5424, "description": "x ...

javascriptjqueryangularjs

Exploring the method of accessing one Vue plugin from another plugin with the use of Vue.prototype

I'm currently working on developing a Vue plugin aimed at simplifying the management of authentication state throughout my application. This particular plugin will require interaction with other Vue plugins such as vuex, vue-router, and vue-apollo (fo ...

javascriptvue.js

Choose a specific inner div element within another div using jQuery

Trying to target a specific div within another div in my HTML structure. Here's how it looks: <div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div> I am attempting to select #cube ...

javascriptjqueryfor-loopjquery-selectors

Troubleshooting why Vue.js isn't updating the DOM with two-way binding

I'm currently utilizing Vue.js for implementing two-way binding. One issue I am facing is with an edit button that should convert a text field into an input field upon clicking. However, the DOM does not update immediately as expected. For instance: ...

javascriptvue.jsvuejs2

Transform a value nested at any depth into an object key using Ramda or plain JavaScript

I have encountered a unique scenario while using a specific library. Instead of returning an array, this library returns nested objects with the final leaf node containing the value. For instance: red.walk.fast.true is returned as {red: {walk: {fast: &apo ...

javascriptobjectnestedmappingramda.js

Using a pre-defined function as a parameter will not function properly with the event listener

As a beginner, I recently attempted the following: ul.addEventListener("click", function(e) { console.log("Hi"); }); Surprisingly, this code worked just fine. I learned that the function used here is anonymous. However, when I tried ...

javascriptdom-eventsaddeventlistener

What is the best way to place a 3D model at random points on the surface of a sphere while ensuring that it always faces the right direction?

I'm faced with the challenge of placing huts randomly on a spherical world. While this task is feasible, the issue arises when the huts do not sit correctly - their bottom should be in contact with the tile below. I've experimented with the &apos ...

javascriptthree.js

The issue at hand is the lack of execution for the Mocha Chai `.end()`

I have encountered an issue while trying to write a Mocha chai test for a Nodejs API that was previously tested using Supertest. Strangely, the test always passes even when I intentionally specify wrong expected parameters. Below is the code snippet of th ...

javascriptnode.jsexpressmocha.jschai

Managing environment variables in Nuxt with Firebase: Best practices

I have been working on creating a firebase authentication app that is reusable and fully functional. However, despite exploring various online solutions, I have managed to develop a solution that works well. My concern now is about protecting sensitive dat ...

firebasevue.jsfirebase-authenticationnuxt.js

Resource loading error: The server returned a 404 (Not Found) status code, as shown in the console

Click here I have a simple file structure where index.html, script.js, and login.js are all in the same root folder without any subfolders. The issue I'm facing is that although the connection to the database works fine, there seems to be a problem wi ...

javascripthtmlmysqlnode.jsforms

Using Vue.js to alter the CSS class property

I am exploring Vue.js and looking to modify a CSS class property. Here is the HTML code utilizing the specified class: <div class="customTimer"></div> Here is the corresponding CSS code: .customTimer { width: 100%; height: 1 ...

javascripthtmlcssvue.jsvuejs2

Leveraging asynchronous data in a synchronous manner

I am dealing with tax rate data stored in the database to ensure easy updates when necessary. However, JavaScript's asynchronous nature complicates accessing this data as it requires promises or callbacks to retrieve query results. Is there a solution ...

javascriptasynchronous

Loop through an object with only one array using JavaScript

I have a specific object structure that I am trying to iterate through in order to find a particular value within the array. For example, I want to check if the user name is equal to user2. While I was able to accomplish this with two separate objects (cre ...

javascriptarraysnode.jsobject

Variations of a particular software package are necessary

My current project requires Expo, React, and React-Native as dependencies. The configuration in the package.jason file looks like this: "main": "node_modules/expo/AppEntry.js", "private": true, "dependencies": { "expo": "^28.0.0", "expo-three": "^ ...

javascriptreactjsnpmexpo