Having trouble with finding the correct object in an array of objects using indexOf and splice()?

Question

Having trouble with finding the correct object in an array of objects using indexOf and splice()?

Here is an example of an array of objects:

"followers": [
        {
            "id": "1be87842-2f7f-4e3b-8fde-9a998feb3a01",
            "bug_id": "4ae2707b-07ef-4e07-95da-77855c67fece",
            "user_id": "e9e81aa2-4994-483d-a3a7-3b88491f1fda",
            "username": "texample1",
            "name": "Test Example1",
            "created_at": "2018-11-27 21:01:42",
            "updated_at": "2018-11-27 21:01:42",
            "deleted_at": null
        },
        {
            "id": "7bd1fa5f-4109-4beb-b53a-fb03a1d23536",
            "bug_id": "4ae2707b-07ef-4e07-95da-77855c67fece",
            "user_id": "e9e81aa2-4994-483d-a3a7-3b88491f1fda",
            "username": "texample1",
            "name": "Test Example2",
            "created_at": "2018-11-27 21:01:48",
            "updated_at": "2018-11-27 21:01:48",
            "deleted_at": null
        }
    ]

In my vuex store, I have code that attempts to remove an object by its index from the above array:

  let followersArray = state.bugs.find(b => b.id === follower.bug_id).followers
  let index = followersArray.indexOf(follower)
  followersArray.splice(index, 1)

When passing a follower object to this mutation function, it finds the followers array in a bug object, locates the index of the follower, and attempts to remove it. However, the index logged is -1 instead of 1. Any idea what may be causing this issue? If I had the correct index, I would include a condition like if(index !== -1).

javascript vue.js ecmascript-6 vuejs2 vuex

Answer 1

Answer №1

You can utilize the findIndex() method to locate and return the index of a specific follower based on their id:

      let index = followersArray.findIndex(i => i.id === follower.id);

For instance :

let items = [{
  name: "aaa"
}, {
  name: "bbb"
}, {
  name: "ccc"
}];
let c = {
  name: "ccc"
};
let index = items.findIndex(item => item.name === c.name)

console.log(index)

Answer 2

You can utilize the findIndex() method to locate and return the index of a specific follower based on their id:

      let index = followersArray.findIndex(i => i.id === follower.id);

For instance :

let items = [{
  name: "aaa"
}, {
  name: "bbb"
}, {
  name: "ccc"
}];
let c = {
  name: "ccc"
};
let index = items.findIndex(item => item.name === c.name)

console.log(index)

Answer 3

Answer №2

Upon executing this code and encountering a -1:

let position = followersArray.indexOf(follower);

this indicates that the follower object is not present within the followersArray. It's probable that the followersArray holds a replica of the follower object rather than a direct reference to it.

Even if the follower object shares identical attributes and values with the object at followersArray[1], the indexOf function will yield a -1 unless they are indeed the exact same object.

If your aim is simply to locate an object in the array based on a specific attribute value (like id), you could utilize map or findIndex for this purpose:

let index = followersArray.map(i => i.id).indexOf(follower.id);

Answer 4

Upon executing this code and encountering a -1:

let position = followersArray.indexOf(follower);

this indicates that the follower object is not present within the followersArray. It's probable that the followersArray holds a replica of the follower object rather than a direct reference to it.

Even if the follower object shares identical attributes and values with the object at followersArray[1], the indexOf function will yield a -1 unless they are indeed the exact same object.

If your aim is simply to locate an object in the array based on a specific attribute value (like id), you could utilize map or findIndex for this purpose:

let index = followersArray.map(i => i.id).indexOf(follower.id);

Answer 5

Answer №3

What will be displayed in the console if you print out the followersArray result? If my understanding is accurate, the find method will return an array, even when it contains only one element. Give it a try by using the following code snippet:

let followersArray = state.bugs.find(b => b.id === follower.bug_id).followers[0]

Answer 6

What will be displayed in the console if you print out the followersArray result? If my understanding is accurate, the find method will return an array, even when it contains only one element. Give it a try by using the following code snippet:

let followersArray = state.bugs.find(b => b.id === follower.bug_id).followers[0]

Having trouble with finding the correct object in an array of objects using indexOf and splice()?

Answer №1

Answer №2

Answer №3

Similar questions

Searching patterns in Javascript code using regular expressions

What is the best way to update my component when the selected value is changed?

Clicking on the mail icon will open the mail with the associated mail id

Utilizing async/await as a module function: A comprehensive guide

Choose all div elements except for those contained within a certain div

Modify an element upon clicking the mouse on an image

jasmine and protractor test failing due to use of byID

Unfulfilled promises are left hanging

Could the absence of a tree view in the div be due to an error in the positioning of the DOM

Retrieving Values from Array with AngularJS Keys - A How-To Guide

Checking React props using Jest and Enzyme - A simple guide

Receive the outcome once the form is submitted

Implement Babel with node.js 6.9

Encountering an issue where an error message indicates that a variable previously declared is now undefined

Unable to display search results with AJAX in Select2

What are the effects of calling callback(false) and callback(true)?

I require displaying the initial three letters of the term "basketball" and then adding dots

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

Retrieve HTML classes within JavaScript textual templates

Retrieve data from two databases and display the information from two separate arrays on a single ejs page after making two separate database calls