Home How can I return newly declared variable that is appended to the object in map function

Questions

How can I return newly declared variable that is appended to the object in map function

August 16, 2022

Check the code below

const responseData = {
    students: [
        {
            id: 1,
            classAttended: 'Level 4',
            classRoomNo: '101',
            attendance: '3',
            marks: '50',
            optIn: 'Y',
            historyDataList: [
                {
                    id: 6,
                    shivirdetails: {
                        id: 1,
                        year: '2016',
                    },
                    classAttended: 'Level 1',
                    classRoomNo: '108',
                    attendance: '5',
                    marks: '50',
                    optIn: 'Y',
                },
            ],
        },
        {
            id: 2,
            classAttended: 'Level 3',
            classRoomNo: '101',
            attendance: '3',
            marks: '50',
            optIn: 'Y',
            historyDataList: [
                {
                    id: 8,
                    shivirdetails: {
                        id: 6,
                        year: '2016',
                    },
                    classAttended: 'Level 3',
                    classRoomNo: '101',
                    attendance: '5',
                    marks: '64',
                    optIn: 'Y',
                },
            ],
        },
    ],
};

const getHistoricalData = (student, year, key) => {
    const { historyDataList } = student;
    const res = historyDataList.map((historyData) => {
        const {
            shivirdetails,
            shivirdetails: { year: shivirYear},
        } = historyData;
        if (shivirdetails && shivirYear == year && historyData[key]) {
            return historyData[key];
        }
    });
    return res[0]
};

const {students} = responseData

const result = students.map((student) => {
  student.classRoomNo2016 = getHistoricalData(student, 2016, 'classRoomNo')
  student.marks2016 = getHistoricalData(student, 2016, 'marks')
  student.classAttended2016 = getHistoricalData(student, 2016, 'classAttended')
})

console.log(result)

The result yields undefined. Probably it is because nothing is returned in the result’s mapped function. I want to know how can I return the student and those values appended to it. If I console those values they give me proper data. But I am unable to return it that’s why my result shows array of two undefined.

>Solution :

Your map function is just setting the value in student object but not returning anything. You can use student object along with spread operator to modify and add additional property and return as a response object in map function. Something like this :

    const result = students.map((student) => ({...student, 
      'classRoomNo2016' : getHistoricalData(student, 2016, 'classRoomNo'),
      'marks2016' : getHistoricalData(student, 2016, 'marks'),
      'classAttended2016' : getHistoricalData(student, 2016, 'classAttended')
    }))

const responseData = {
    students: [
        {
            id: 1,
            classAttended: 'Level 4',
            classRoomNo: '101',
            attendance: '3',
            marks: '50',
            optIn: 'Y',
            historyDataList: [
                {
                    id: 6,
                    shivirdetails: {
                        id: 1,
                        year: '2016',
                    },
                    classAttended: 'Level 1',
                    classRoomNo: '108',
                    attendance: '5',
                    marks: '50',
                    optIn: 'Y',
                },
            ],
        },
        {
            id: 2,
            classAttended: 'Level 3',
            classRoomNo: '101',
            attendance: '3',
            marks: '50',
            optIn: 'Y',
            historyDataList: [
                {
                    id: 8,
                    shivirdetails: {
                        id: 6,
                        year: '2016',
                    },
                    classAttended: 'Level 3',
                    classRoomNo: '101',
                    attendance: '5',
                    marks: '64',
                    optIn: 'Y',
                },
            ],
        },
    ],
};

const getHistoricalData = (student, year, key) => {
    const { historyDataList } = student;
    const res = historyDataList.map((historyData) => {
        const {
            shivirdetails,
            shivirdetails: { year: shivirYear},
        } = historyData;
        if (shivirdetails && shivirYear == year && historyData[key]) {
            return historyData[key];
        }
    });
    return res[0]
};

const {students} = responseData

const result = students.map((student) => ({...student, 
  'classRoomNo2016' : getHistoricalData(student, 2016, 'classRoomNo'),
  'marks2016' : getHistoricalData(student, 2016, 'marks'),
  'classAttended2016' : getHistoricalData(student, 2016, 'classAttended')
}))

console.log(result)