Question 225165 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to transform a object with keys of array into breakdown object with keys with no array

Hi I have a array of students. Each students may have mulitple address (array) and multiple hobbies (array)

Structure as below:

const studentsList = {
  students: [
    {
      id: '54654',
      name: 'Tony',
      address: [
        {
          location: 'SNG',
          building: 2,
        },
        {
          location: 'LON',
          building: 3,
        },
      ],
      hobbies: [
        {
          name: 'soccer',
          id: 123,
        },
        {
          name: 'music',
          id: 53,
        },
      ],
    },
    {
      id: '505389',
      name: 'Stephen Strange',
      address: [
        {
          location: 'LUX',
          building: 8,
        },
        {
          location: 'HK',
          building: 25,
        },
      ],
      hobbies: [
        {
          name: 'watch tv',
          id: 143,
        },
        {
          name: 'music',
          id: 83,
        },
      ],
    },
    {
      id: '34534389',
      name: 'Wanda Maximoff',
      address: [
        {
          location: 'HKG',
          building: 89,
        },
        {
          location: 'GEN',
          building: 79,
        },
      ],
      hobbies: [
        {
          name: 'reading',
          id: 45,
        },
        {
          name: 'chess',
          id: 37,
        },
      ],
    },
  ],
}

I would like to transform the student List to below format

1. Each student has a key of hobbies and each hobbies become a single hobby instead of a array

2. Each student has No key of address anymore, but has a key of loccation and building instead.

Like below

const studentsList = {
  students: [
    {
      id: '54654',
      name: 'Tony',
      location: 'SNG',
      building: 2,
      hobbies:  {
          name: 'soccer',
          id: 123,
        },
    },
    {
      id: '54654',
      name: 'Tony',
      location: 'LON',
      building: 3,
      hobbies:  {
          name: 'soccer',
          id: 123,
        },
    },
    {
      id: '54654',
      name: 'Tony',
      location: 'SNG',
      building: 2,
      hobbies:  {
          name: 'music',
          id: 53,
        },
    },

    {
      id: '54654',
      name: 'Tony',
      location: 'LON',
      building: 3,
      hobbies:  {
          name: 'music',
          id: 53,
        },
    },



    {
      id: '505389',
      name: 'Stephen Strange',
      location: 'LUX',
      building: 8,
      hobbies: {
          name: 'watch tv',
          id: 143,
        },
    }, 
    {
      id: '505389',
      name: 'Stephen Strange',
      location: 'HK',
      building: 25,
      hobbies: {
          name: 'watch tv',
          id: 143,
        },
    }, 
    {
      id: '505389',
      name: 'Stephen Strange',
      location: 'HK',
      building: 25,
      hobbies: {
          name: 'music',
          id: 83,
        },
    }, 
    {
      id: '505389',
      name: 'Stephen Strange',
      location: 'LUX',
      building: 8,
      hobbies: {
          name: 'music',
          id: 83,
        },
    }, 
    {
      id: '34534389',
      name: 'Wanda Maximoff',
      location: 'HKG',
      building: 89,
      hobbies:{
          name: 'reading',
          id: 45,
        },

   },
   {
      id: '34534389',
      name: 'Wanda Maximoff',
      location: 'GEN',
      building: 79,
      hobbies:{
          name: 'reading',
          id: 45,
        },

   },
   {
      id: '34534389',
      name: 'Wanda Maximoff',
      location: 'HKG',
      building: 89,
      hobbies:{
          name: 'chess',
          id: 37,
        },

   }, 
   {
      id: '34534389',
      name: 'Wanda Maximoff',
      location: 'GEN',
      building: 79,
      hobbies:{
          name: 'chess',
          id: 37,
        },

   }
  ],
}
Tags:

3

Answers


  1. 0 
    const studentsList = {
  students: [
    {
      id: '54654',
      name: 'Tony',
      address: [
        {
          location: 'SNG',
          building: 2,
        },
        {
          location: 'LON',
          building: 3,
        },
      ],
      hobbies: [
        {
          name: 'soccer',
          id: 123,
        },
        {
          name: 'music',
          id: 53,
        },
      ],
    },
    // ... other student objects ...
  ],
};

const transformedStudentList = {
  students: []
};

studentsList.students.forEach(student => {
  student.address.forEach(address => {
    student.hobbies.forEach(hobby => {
      transformedStudentList.students.push({
        id: student.id,
        name: student.name,
        location: address.location,
        building: address.building,
        hobbies: {
          name: hobby.name,
          id: hobby.id
        }
      });
    });
  });
});

console.log(transformedStudentList);
    Login or Signup to reply.
  2. 0

    Here is the working logic :

    const studentsList = {
  students: [
    {
      id: "54654",
      name: "Tony",
      address: [
        {
          location: "SNG",
          building: 2,
        },
        {
          location: "LON",
          building: 3,
        },
      ],
      hobbies: [
        {
          name: "soccer",
          id: 123,
        },
        {
          name: "music",
          id: 53,
        },
      ],
    },
    {
      id: "505389",
      name: "Stephen Strange",
      address: [
        {
          location: "LUX",
          building: 8,
        },
        {
          location: "HK",
          building: 25,
        },
      ],
      hobbies: [
        {
          name: "watch tv",
          id: 143,
        },
        {
          name: "music",
          id: 83,
        },
      ],
    },
    {
      id: "34534389",
      name: "Wanda Maximoff",
      address: [
        {
          location: "HKG",
          building: 89,
        },
        {
          location: "GEN",
          building: 79,
        },
      ],
      hobbies: [
        {
          name: "reading",
          id: 45,
        },
        {
          name: "chess",
          id: 37,
        },
      ],
    },
  ],
};

function builder(StudentsList) {
  let arr = StudentsList.students;
  let curr = [];

  //

  for (let elem of arr) {
    let address = elem.address;
    let hobbies = elem.hobbies;

    //if hobbies array is empty the terniary operator logic is used
    for (let itemHobbies of hobbies.length > 0
      ? hobbies
      : [{ name: null, id: null }]) {
      for (let itemAddress of address) {
        let temp = {};
        //
        temp.id = elem.id;
        temp.name = elem.name;
        //
        temp.location = itemAddress.location;
        temp.building = itemAddress.building;
        //handling if hobbies array is empty
        if (itemHobbies && itemHobbies.id == null) temp.hobbies = [];
        else temp.hobbies = itemHobbies;
        //

        curr.push(temp);
      }
    }
  }

  return curr;
}

let result = builder(studentsList);

console.log(result);
    Login or Signup to reply.
  3. 0

    Some crazy functional approach using Array::reduce() and Array::forEach().
    Basically you iterate hobbies for each student and inside the loop you add each address of the student to a new student item with the current hobby and student:

    const students = studentsList.students
    .reduce((r, { hobbies, address, ...stud }) =>
        hobbies.forEach(hobby => address.forEach(
            addr => r.push(Object.assign({}, stud, addr, {hobbies: hobby}))
        )) || r,
    []);
  
console.log(JSON.stringify({students}, null, 4));
    <script>
const studentsList = {
  students: [
    {
      id: '54654',
      name: 'Tony',
      address: [
        {
          location: 'SNG',
          building: 2,
        },
        {
          location: 'LON',
          building: 3,
        },
      ],
      hobbies: [
        {
          name: 'soccer',
          id: 123,
        },
        {
          name: 'music',
          id: 53,
        },
      ],
    },
    {
      id: '505389',
      name: 'Stephen Strange',
      address: [
        {
          location: 'LUX',
          building: 8,
        },
        {
          location: 'HK',
          building: 25,
        },
      ],
      hobbies: [
        {
          name: 'watch tv',
          id: 143,
        },
        {
          name: 'music',
          id: 83,
        },
      ],
    },
    {
      id: '34534389',
      name: 'Wanda Maximoff',
      address: [
        {
          location: 'HKG',
          building: 89,
        },
        {
          location: 'GEN',
          building: 79,
        },
      ],
      hobbies: [
        {
          name: 'reading',
          id: 45,
        },
        {
          name: 'chess',
          id: 37,
        },
      ],
    },
  ],
}
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search