CODEWITHSUNDEEP
javascriptarraysreactjsobject
vjtechno
vjtechno

Reputation: 484

remove the object from array by iterating the array on map function?

I have an array of objects called data and also have a separate object that is called mapping.

I try to delete the invalid object from the array. I have iterated the array using the map function. I check whether the object is valid using the mapping object. If it is found to be invalid then it should be deleted from the array, but the map function is not working asynchronously so they skip the invalid object, which is pushed into the array which is not fine. so please suggest some solution and also give me the small detail why map function is skipping the object.

Here my code:

 const data = [
        {
          id: 11,
          name: "dashboard",
        },

        {
          id: 13,
          name: "card",
        },

        {
          id: 1,
          name: "user",
        },

        {
          id: 4,
          name: "test",
        },
      ];

      const mapping = {
        1: "dashboard",
        2: "user",
        3: "card",
        4: "test",
      };

      const filterData = () => {
        data.map((parent, i) => {
          if (Object.keys(mapping).includes(parent.id.toString())) {
          } else {
            const index = data.indexOf(parent);
            if (index > -1) {
              data.splice(index, 1);
            }
          }
        });
        console.log("updated data", data);
      };

    ```
wrong output
[
 { id: 13, name: "card" },
    { id: 1, name: "user" },
   { id: 4, name: "test" }
    ];

Upvotes: 0

Views: 1222

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 76434

Ajeet Shah's solution is correct and I would apply the same idea, however, I think that a solution based on your code is also important so you will know what was the difference between your code and a correct one. However, I recommend accepting Ajeet's answer.

Let's see the following code:

 const data = [
        {
          id: 11,
          name: "dashboard",
        },

        {
          id: 13,
          name: "card",
        },

        {
          id: 1,
          name: "user",
        },

        {
          id: 4,
          name: "test",
        },
      ];

      const mapping = {
        1: "dashboard",
        2: "user",
        3: "card",
        4: "test",
      };

      const filterData = [];
      data.map((parent, i) => {
        if (Object.keys(mapping).includes(parent.id.toString())) {
          filterData.push(parent.id.toString());
        }
      });
      console.log(filterData);

The fix was to create an empty array and since map() is looping data, you just add the valid elements to the array you intend to use as an output. Even though this solution is correct, .map() is really meant to reinterpret the values and you logically need .filter(). As shown above, you can successfully filter by mapping, but writing code like above is less readable than writing the code in such a way that it clearly indicates that a filter is what happens.

Upvotes: 1

Ajeet Shah
Ajeet Shah

Reputation: 19813

You can use filter to delete invalid (based on some condition) objects from the array without modifying the original array.

const filterData = (data, mapping) => data.filter(item => mapping[item.id])
// Or
const filterData = (data, mapping) => data.filter(item => mapping[item.id] !== undefined)
// Or
const filterData = (data, mapping) => data.filter(item => mapping[item.id] !== void 0)

Demo:

const filterData = (data, mapping) => data.filter(item => mapping[item.id])

const data = [{
    id: 11,
    name: "dashboard",
  },
  {
    id: 13,
    name: "card",
  },
  {
    id: 1,
    name: "user",
  },
  {
    id: 4,
    name: "test",
  },
];

const mapping = {
  1: "dashboard",
  2: "user",
  3: "card",
  4: "test",
};

console.log(filterData(data, mapping))

Note that splice method will modify your original array i.e. data which you may not want.

Upvotes: 1

Related Questions