make existing object in array the last item in the array REDUX-CodePudding

I am fetching some data from Mongodb. THe data is an array of objects. I would like to make the object with group.title === "unsubscribers" the last object in the array always. the array will always have variable length.

I am using React with Redux and trying to push my object with title "unsubscribers" to the end of the array so I can always render as last item in a table

Here is my reducer. the console.log is showing me 3 not the array of objects

import { LIST_GROUPS, LIST_SHOW_GROUPS } from '../actions/types';


export default function (state = [], action) {
    switch (action.type) {
        // when we logout, this action.payload is an empty string so lets do || false 
        case LIST_GROUPS:
            const unSubGroup = action.payload.filter((group) => group.title === "unsubscribers")
            const allOtherGroups = action.payload.filter((group) => group.title !== "unsubscribers")[0]
            console.log(allOtherGroups.push(unSubGroup))
            return action.payload
        case LIST_SHOW_GROUPS:
            return action.payload.filter((el) => { return !el.hide })  
            default:
            return state;
    }
}

CodePudding user response：

Your code is correct, but .push returns the number of elements in the result, instead of the actual result, all you have to do is move the console.log one line down:

const unSubGroup = action.payload.filter((group) => group.title === "unsubscribers")
const allOtherGroups = action.payload.filter((group) => group.title !== "unsubscribers")[0]
allOtherGroups.push(unSubGroup)
console.log(allOtherGroups)

However, I think you should return allOtherGroups instead of return action.payload

CodePudding user response：

Yes my code was ALMOST CORRECT. I needed to add the brackets to unSubGroup to make sure and return the object instead of an array with an. object inside.

I was getting a result like this where the unSubGroup was an array with an object, I only wanted the object.

0: {contacts: Array(445), _id: '6266fa8df11e', title: 'presidential', created: '2022-04-25T19:46:21.792Z', hide: false}
1: {contacts: Array(0), _id: '626a0d61db63', title: 'rolex', hide: false, created: '2022-04-28T03:43:29.664Z'}
2: [{…}]


import { LIST_GROUPS, LIST_SHOW_GROUPS } from '../actions/types';


export default function (state = [], action) {
    switch (action.type) {
        // when we logout, this action.payload is an empty string so lets do || false 
        case LIST_GROUPS:
            const unSubGroup = action.payload.filter((group) => group.title === "unsubscribers")[0]
            const allOtherGroups = action.payload.filter((group) => group.title !== "unsubscribers")
            allOtherGroups.push(unSubGroup)
            console.log("allOtherGroup", allOtherGroups)
            return action.payload
        case LIST_SHOW_GROUPS:
            return action.payload.filter((el) => { return !el.hide })  
            default:
            return state;
    }
}

above function gave me below output ( needed to add the [0] to end of unSubGroup filter method

0: {contacts: Array(445), _id: '6266fa8df', title: 'presidential', created: '2022-04-25T19:46:21.792Z', hide: false}
1: {contacts: Array(0), _id: '626a0d61db', title: 'rolex', hide: false, created: '2022-04-28T03:43:29.664Z'}
2: {contacts: Array(0), _id: '626a0bc2', title: 'unsubscribers', hide: false, created: '2