JavaScript: find all sub-arrays in a given array

Question

JavaScript: find all sub-arrays in a given array

I have a complex object structure that I need to simplify:

const test = {
  leagues: [
    {
      timezone: "GMT",
      date: "1/2/2",
      premierLeague: [
        { name: "Liverpool", age: 1892 },
        { name: "Manchester Utd", age: 1878 }
      ],
      laLiga: [
        {
          team: "Real Madrid",
          stadium: "Bernabeu"
        },
        {
          team: "Barcelona",
          stadium: "Camp Nou"
        }
      ]
    }
  ]
};

The goal is to transform it into this simpler result:

const result = [
  { name: "Liverpool", age: 1892 },
  { name: "Manchester Utd", age: 1878 },
  {
    team: "Real Madrid",
    stadium: "Bernabeu"
  },
  {
    team: "Barcelona",
    stadium: "Camp Nou"
  }
];

I attempted using the flat() method but encountered difficulties extracting the arrays within the leagues. The resulting array needs to be dynamic, accommodating all sub-arrays within leagues. Could someone provide guidance on achieving this task?

javascript ecmascript-6

Answer 1

Answer №1

If the structure of your object doesn't go any deeper, you can use this concise one-liner:

const result = test.leagues.reduce((arr, obj) => Object.values(val).reduce((innerArr, val) => Array.isArray(val) ? innerArr.concat(val) : innerArr, arr), []);

Here is a more readable version:

const result = test.leagues.reduce((arr, obj) => {
  return Object.values(val).reduce((innerArr, val) => {
    return Array.isArray(val)
      ? innerArr.concat(val) 
      : innerArr
  }, arr);
}), []);

Answer 2

If the structure of your object doesn't go any deeper, you can use this concise one-liner:

const result = test.leagues.reduce((arr, obj) => Object.values(val).reduce((innerArr, val) => Array.isArray(val) ? innerArr.concat(val) : innerArr, arr), []);

Here is a more readable version:

const result = test.leagues.reduce((arr, obj) => {
  return Object.values(val).reduce((innerArr, val) => {
    return Array.isArray(val)
      ? innerArr.concat(val) 
      : innerArr
  }, arr);
}), []);

Answer 3

Answer №2

Perhaps you are seeking:

const result = test.leagues.flatMap(league =>
  Object.values(league).filter(Array.isArray).flat()
);

Answer 4

Perhaps you are seeking:

const result = test.leagues.flatMap(league =>
  Object.values(league).filter(Array.isArray).flat()
);

Answer 5

Answer №3

This situation feels strange, as you will have objects of various shapes within the same array. How do you plan to handle this?

It appears that your intention is to combine all values from test.leagues that are arrays themselves.

const test = {
  leagues: [{
    timezone: "GMT",
    date: "1/2/2",
    premierLeague: [{
        name: "Liverpool",
        age: 1892
      },
      {
        name: "Manchester Utd",
        age: 1878
      }
    ],
    laLiga: [{
        team: "Real Madrid",
        stadium: "Bernabeu"
      },
      {
        team: "Barcelona",
        stadium: "Camp Nou"
      }
    ]
  }]
};


const output = [];
for (const league of test.leagues) {
  for (const key in league) {
    if (Array.isArray(league[key])) {
      // Add each element in `league[key]` to `output`
      // avoiding the need to flatten it later on
      output.push(...league[key]);
    }
  }
}
console.log({
  output
});

Answer 6

This situation feels strange, as you will have objects of various shapes within the same array. How do you plan to handle this?

It appears that your intention is to combine all values from test.leagues that are arrays themselves.

const test = {
  leagues: [{
    timezone: "GMT",
    date: "1/2/2",
    premierLeague: [{
        name: "Liverpool",
        age: 1892
      },
      {
        name: "Manchester Utd",
        age: 1878
      }
    ],
    laLiga: [{
        team: "Real Madrid",
        stadium: "Bernabeu"
      },
      {
        team: "Barcelona",
        stadium: "Camp Nou"
      }
    ]
  }]
};


const output = [];
for (const league of test.leagues) {
  for (const key in league) {
    if (Array.isArray(league[key])) {
      // Add each element in `league[key]` to `output`
      // avoiding the need to flatten it later on
      output.push(...league[key]);
    }
  }
}
console.log({
  output
});

Answer 7

Answer №4

Just wanted to chime in with my thoughts on this topic. I echo the sentiments shared by others. Perhaps this solution will do the trick:

const data = {
  leagues: [
    {
      timezone: "GTM-2",
      date: "20/12/2022",
      premierLeague: [
        { name: "Chelsea", founded: 1905 },
        { name: "Arsenal", founded: 1886 }
      ],
      laLiga: [
        {
          team: "Atletico Madrid",
          stadium: "Wanda Metropolitano"
        },
        {
          team: "Real Betis",
          stadium: "Benito Villamarin"
        }
      ]
    }
  ]
};

let resultArray = [];

function iterateObjects(obj, arrayToAdd) {
    for(const [key, val] of Object.entries(obj)) {
    if(Array.isArray(obj[key])) {
      arrayToAdd.push(obj[key]);
      continue;
    }
    
    const type = typeof obj[key];
    
    if(type === "object") {
       iterateObjects(obj[key], arrayToAdd);
    }
  }
}

iterateObjects(data.leagues, resultArray);

console.log(resultArray.flat())

Answer 8

Just wanted to chime in with my thoughts on this topic. I echo the sentiments shared by others. Perhaps this solution will do the trick:

const data = {
  leagues: [
    {
      timezone: "GTM-2",
      date: "20/12/2022",
      premierLeague: [
        { name: "Chelsea", founded: 1905 },
        { name: "Arsenal", founded: 1886 }
      ],
      laLiga: [
        {
          team: "Atletico Madrid",
          stadium: "Wanda Metropolitano"
        },
        {
          team: "Real Betis",
          stadium: "Benito Villamarin"
        }
      ]
    }
  ]
};

let resultArray = [];

function iterateObjects(obj, arrayToAdd) {
    for(const [key, val] of Object.entries(obj)) {
    if(Array.isArray(obj[key])) {
      arrayToAdd.push(obj[key]);
      continue;
    }
    
    const type = typeof obj[key];
    
    if(type === "object") {
       iterateObjects(obj[key], arrayToAdd);
    }
  }
}

iterateObjects(data.leagues, resultArray);

console.log(resultArray.flat())

JavaScript: find all sub-arrays in a given array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Exploring various properties in React

Locally hosted website failing to transfer login details to external domain

Empty Media Viewer

What could be causing the removal of style classes from my element after it is appended?

Introducing a custom JavaScript function using Selenium in Java

Is there a way to pass the state to the page destination when navigating back in the browser using react-router-dom?

jquery mobile page navigation option

react component fails to rerender upon state change

Having difficulty with TypeScript typings implementation

Populate a dropdown with values from a JSON object

Error Occurs While Getting Request Parameters with Ajax Post and Express.js

Transmitting a JSON array from a client-side using AJAX to a server

Can the angularjs cached resource method be utilized within a filter?

Trouble with callback execution during async foreach loop when using collection.save() in Node.js

The performance of dom-repeat may be impacted when dealing with sizable objects, such as those containing base64 encoded images

I encounter Error 406 and CORS issues when making API calls

What is the best approach for assigning initial values to data retrieved from Vuex?

Is there a way to adjust the height of one div based on the height of another div in Bootstrap?

Upgrading from Asp.Net Core 2 to .Net 6 caused issues with XMLHttpRequest for me

Is there a method to enclose a Grafana row with a border?