Search code examples
javascriptarraysjavascript-objectsnested-object

Convert an array of Objects with nested Objects into simple array of Objects?


I have given an array of nested object and I want to convert it into a simple array of objects and I don't know how to proceed in this problem can anyone suggest me a way to solve this problem.i have tried but I haven't able to solve by myself or I haven't found anything like that

const data = [
  {
    attachment: {
      Name: {type: string, value: 'Amar'},
      'Second Contact': {type: 'phoneNumber', value: '+91123587900'},
      'First Contact': {type: 'phoneNumber', value: '+911234567890'},
      'Registered Office Address': {
        value: 'New Delhi',
        type: 'string',
      },
      'Company Logo': {type: 'string', value: ''},
      'Youtube ID': {type: 'string', value: ''},
    },
    creator: {
      displayName: 'xyz',
      phoneNumber: '+915453553554',
      photoURL:
        'https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwixw9uJrYjnAhWOe30KHa42AFwQjRx6BAgBEAQ&url=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fpic&psig=AOvVaw24C_LUOadGZAi3r2JtZe9b&ust=1579272070036146',
    },
  },
  {
    attachment: {
      Name: {type: string, value: 'hari'},
      'Second Contact': {type: 'phoneNumber', value: '+91153587900'},
      'First Contact': {type: 'phoneNumber', value: '+911264567890'},
      'Registered Office Address': {
        value: 'New Delhi mv',
        type: 'string',
      },
      'Company Logo': {type: 'string', value: ''},
      'Youtube ID': {type: 'string', value: ''},
    },
    creator: {
      displayName: 'xyz',
      phoneNumber: '+915453543554',
      photoURL:
        'https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwixw9uJrYjnAhWOe30KHa42AFwQjRx6BAgBEAQ&url=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fpic&psig=AOvVaw24C_LUOadGZAi3r2JtZe9b&ust=1579272070036146',
    },
  },
];

expected output is like this

[
    {
        Name:'Amar',
        'Second Contact':+91123587900,
        'First Contact':+911234567890,
        'Registered Office Address':'New Delhi',
        displayName:'xyz',
        phoneNumber:'+915453553554'   
    },
    {
        Name:'hari',
        'Second Contact':+91153587900,
        'First Contact':+911264567890,
        'Registered Office Address':'New Delhi mv',
        displayName:'xyz',
        phoneNumber:'+915453543554'     
    }
]

Solution

  • Assuming you need to get few properties. you could simply use map. If you need a solution which works with all the properties, I will probably iterate through using object.keys.

    I have added both solution here

    const data = [
      {
        "attachment": {
          "Name": {"type": "string", "value": "Amar"},
          "Second Contact": {"type": "phoneNumber", "value": "+91123587900"},
          "First Contact": {"type": "phoneNumber", "value": "+911234567890"},
          "Registered Office Address": {
            "value": "New Delhi",
            "type": "string"
          },
          "Company Logo": {"type": "string", "value": ""},
          "Youtube ID": {"type": "string", "value": ""}
        },
        "creator": {
          "displayName": "xyz",
          "phoneNumber": "+915453553554",
          "photoURL":
            "https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwixw9uJrYjnAhWOe30KHa42AFwQjRx6BAgBEAQ&url=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fpic&psig=AOvVaw24C_LUOadGZAi3r2JtZe9b&ust=1579272070036146"
        }
      },
      {
        "attachment": {
          "Name": {"type": "string", "value": "hari"},
          "Second Contact": {"type": "phoneNumber", "value": "+91153587900"},
          "First Contact": {"type": "phoneNumber", "value": "+911264567890"},
          "Registered Office Address": {
            "value": "New Delhi mv",
            "type": "string"
          },
          "Company Logo": {"type": "string", "value": ""},
          "Youtube ID": {"type": "string", "value": ""}
        },
        "creator": {
          "displayName": "xyz",
          "phoneNumber": "+915453543554",
          "photoURL":
            "https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwixw9uJrYjnAhWOe30KHa42AFwQjRx6BAgBEAQ&url=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fpic&psig=AOvVaw24C_LUOadGZAi3r2JtZe9b&ust=1579272070036146"
        }
      }
    ];
    
    const result = data.map(item => {
      return {
        "Name": item.attachment.Name.value,
        "Second Contact": item.attachment["Second Contact"].value
      };
    });
    
    console.log(JSON.stringify(result));
    
    
    // Another generic way
    const result2 = data.map(item => {
      const singleObj = {};
      Object.keys(item.attachment).forEach(key => {
    singleObj[key] = item.attachment[key].value;
      });
      return singleObj;
    });
    
    console.log(JSON.stringify(result2));