Remove duplicate items from the array retracted from api-CodePudding

I am building a Blog app and I am trying to get results but it is showing duplicate results, I am trying to remove the duplicate results from the array.

But the problem is there are two key and values in each dict inside array, One is unique and other can be same so I am trying to distinct based on same array, It worked But the other key and value pair (which is unique) is not attaching with the other pair.

response which is returning from db

[
    {
        "id": 2,
        "name": "user_1"
    },
    {
        "id": 3,
        "name": "user_3"
    },
    {
        "id": 4,
        "name": "user_3"
    }
]

App.js

function App() {
   const [blogs, setBlogs] = useState([]);

   axios.get("retract_blogs/").then((res) => {
   
      // Here I also want to attach "id"
      setBlogs({[...new Set(res.data.data.map(x => x.name))]})

   }

   return(
     <div>
       {
         blogs.map((user) =>
          <div>
             {user.name}

             // Here I wamt to show ID
             // {user.id}

          </div>
       }
     </div>
   )
}

I want to add id with x.username, I also tried using

setBlogs({data:[...new Set(res.data.data.map(x => x.name, x.id))]})

But it showed

x is not defined

But I am trying to add both name and id, and remove duplicates based on name not id.

I have tried many times but it is still not working.

CodePudding user response：

To keep the id of the last occurence you can create a Map of the array keyed by name and then convert back to an array using the iterator returned by Map.values(). This works by overwriting earlier entries in the Map with the same name.

const users = [{ "id": 2, "name": "user_1" }, { "id": 3, "name": "user_3" }, { "id": 4, "name": "user_3" }];

const result = [...new Map(users.map((user) => [user.name, user])).values()];

console.log(result);
// [ { id: 2, name: 'user_1' }, { id: 4, name: 'user_3' } ]

If you instead want to keep the id of the first occurence of a name you can use a slightly modified 'group by' grouping into an object by name (here in a reduce() call, but it could easily be done in a standard loop as well) before taking the Object.values. This works by only setting the accumulator[name] property if it doesn't already exist, here using logical nullish assignment (??=)

const users = [{ "id": 2, "name": "user_1" }, { "id": 3, "name": "user_3" }, { "id": 4, "name": "user_3" }];

const result = Object.values(users.reduce((a, c) => (a[c.name] ??= c, a), {}));

console.log(result);
// [ { id: 2, name: 'user_1' }, { id: 3, name: 'user_3' } ]