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

Question

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.

I appreciate your answer but this is what the whole post is about. How can I return those appended values - classRoomNo2016, marks2016 and classAttended2016 — Vikash Sharma, Aug 16 '22 at 11:15
You are adding properties to existing object so just return `return student;` — DecPK, Aug 16 '22 at 11:16
@DecPK thanks a lot man, it was so silly of me to even post this question. Your answer helped. I appreciate all the answers from everyone — Vikash Sharma, Aug 16 '22 at 11:25
Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) — pilchard, Aug 16 '22 at 11:43
@DecPK could you please tell how would I make a method to generalize those appends? I mean suppose I have more keys to append to the object, supposedly 20 or 24 more keys like students.classRoomNo2016 . How am I going to generalize the formula? — Vikash Sharma, Aug 16 '22 at 13:43

Milind Anantwar · Accepted Answer · 2022-08-16T11:53:47.013

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)

score 0 · Answer 2 · answered Aug 16 '22 at 11:20

In your map function, you don't have any return statement so it returns nothing. There are cases where you can return without a return statement.

For example

const result2 = students.map((student) => getHistoricalData(student, 2016, 'classRoomNo'));

The result is ["108", "101"]. This is actually a short version of this

    const result2 = students.map((student) => { return getHistoricalData(student, 2016, 'classRoomNo')});

So you cannot return with a return statement.

In your case, as I understand you want to return an object which should have 3 fields (classRoomNo2016, marks2016, classAttended2016). Thus you have to create an object to return.

It should look like something like this:

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

score 0 · Answer 3 · answered Aug 16 '22 at 11:27

If the value does not append, you can copy any object with JSON.parse(JSON.stringify());

In addition, inside the function getHistoricalData you return nothing if the condition does not match. You can simply return undefined.

You can find, investigate and run the fully fixed code in the snipped.

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];
        } else {
            return undefined;
        }
    });
    return res[0]
};

const {students} = responseData;

const result = students.map((student) => {
  const cpStd = JSON.parse(JSON.stringify(student));
  cpStd["classRoomNo2016"] = getHistoricalData(student, 2016, 'classRoomNo');
  cpStd["marks2016"] = getHistoricalData(student, 2016, 'marks');
  cpStd["classAttended2016"] = getHistoricalData(student, 2016, 'classAttended');
  return cpStd;
})

console.log(result)

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

3 Answers3