make new array of objects out of flat object with numbers in keys

Given this object:

const data = {
    home_tabs: 2,
    home_tabs_0_tab_alignment: "left",
    home_tabs_0_tab_content: "<h1>hello world</h1>",
    home_tabs_0_tab_cta: {
        title: 'Learn More',
        url: 'https://',
        target: ''},
    home_tabs_0_tab_icon:"fa-brands",
    home_tabs_0_tab_image: 473,
    home_tabs_0_tab_title:"Facebook",
    home_tabs_1_tab_alignment: "right",
    home_tabs_1_tab_content: "<h1>new world</h2>",
    home_tabs_1_tab_cta: {
        title: 'Learn More',
        url: 'https://',
        target: ''},
    home_tabs_1_tab_icon:"fa-brands",
    home_tabs_1_tab_image:851,
    home_tabs_1_tab_title:"Twitter"
}

How would I be able to remap it to something like this?

const home_tabs_array = [
  {
    image_alignment: 'left',
    content: '<h1>hello world</h1>',
    cta: {
      title: 'Learn More',
      url: 'https://',
      target: '',
    },
    icon: 'fa-brands',
    image: 851,
    title: 'Facebook',
  },
  {
    image_alignment: 'right',
    content: '<h1>new world</h2>',
    cta: {
      title: 'Learn More',
      url: 'https://',
      target: '',
    },
    icon: 'fa-brands',
    image: 473,
    title: 'Twitter',
  },
];

My current attempt is something like this:

const count = props.home_tabs;

let home_tabs_array = [];
// loop through the number of tabs
for (let i = 0; i < count; i++) {
  // create an object for each tab
  const tab = {
    image_al开发者_Go百科ignment: props.home_tabs_[i]_image_alignment,
    content: props.home_tabs_[i]_content,
    cta: {
      title: props.home_tabs_[i]_cta_title,
      url: props.home_tabs_[i]_cta_url,
      target: props.home_tabs_[i]_cta_target,
    },
    icon: props.home_tabs_[i]_icon,
    image: props.home_tabs_[i]_image,
    title: props.home_tabs_[i]_title,
  };
  // push the object to the array
  home_tabs_array.push(tab);
}

But that's a no go b/c of the []. But I don't know how to access the number in the middle of the key.

Maybe I'm even looking at this the wrong way? How to access the number inside the key of the incoming object?

Here is an answer that constructs the tabs array by traversing the data properties:

const data = {
    home_tabs: 2,
    home_tabs_0_tab_alignment: "left",
    home_tabs_0_tab_content: "<h1>hello world</h1>",
    home_tabs_0_tab_cta: { title: 'Learn More', url: 'https://', target: ''},
    home_tabs_0_tab_icon:"fa-brands",
    home_tabs_0_tab_image: 473,
    home_tabs_0_tab_title:"Facebook",
    home_tabs_1_tab_alignment: "right",
    home_tabs_1_tab_content: "<h1>new world</h2>",
    home_tabs_1_tab_cta: { title: 'Learn More', url: 'https://', target: ''},
    home_tabs_1_tab_icon:"fa-brands",
    home_tabs_1_tab_image:851,
    home_tabs_1_tab_title:"Twitter"
}
let tabs = [];
Object.keys(data).forEach(key => {
  let m = key.match(/^home_tabs_([0-9]+)_tab_(.*)$/);
  if(m) {
    let idx = m[1];  // tab index
    let prop = m[2]; // property name
    if(prop === 'alignment') {
      prop = 'image_alignment'; // exception
    }
    if(!tabs[idx]) {
      tabs[idx] = {}; // create empty object at index if not exist
    }
    tabs[idx][prop] = data[key]; // set the property at the index
  }
});
console.log(tabs);

You should use string interpolation during object property selection, like this:

const count = props.home_tabs;

let home_tabs_array = [];
// loop through the number of tabs
for (let i = 0; i < count; i++) {
  // create an object for each tab
  const tab = {
    image_alignment: props[`home_tabs_[${i}]_image_alignment`],
    content: props[`home_tabs_[${i}]_content`],
    cta: {
      title: props[`home_tabs_[${i}]_cta_title`],
      url: props[`home_tabs_[${i}]_cta_url`],
      target: props[`home_tabs_[${i}]_cta_target`],
    },
    icon: props[`home_tabs_[${i}]_icon`],
    image: props[`home_tabs_[${i}]_image`],
    title: props[`home_tabs_[${i}]_title`],
  };
  // push the object to the array
  home_tabs_array.push(tab);
}

We can use Template literals to get the dynamic value

Note: pay attention to the property inside cta,we need to get value like below

props[`home_tabs_${i}_tab_cta`][`title`]

Test code:

const props = {
    home_tabs: 2,
    home_tabs_0_tab_alignment: "left",
    home_tabs_0_tab_content: "<h1>hello world</h1>",
    home_tabs_0_tab_cta: {
        title: 'Learn More',
        url: 'https://',
        target: ''},
    home_tabs_0_tab_icon:"fa-brands",
    home_tabs_0_tab_image: 473,
    home_tabs_0_tab_title:"Facebook",
    home_tabs_1_tab_alignment: "right",
    home_tabs_1_tab_content: "<h1>new world</h2>",
    home_tabs_1_tab_cta: {
        title: 'Learn More',
        url: 'https://',
        target: ''},
    home_tabs_1_tab_icon:"fa-brands",
    home_tabs_1_tab_image:851,
    home_tabs_1_tab_title:"Twitter"
}

const count = props.home_tabs;
let home_tabs_array = [];
// loop through the number of tabs
for (let i = 0; i < count; i++) {
  // create an object for each tab
  const tab = {
    image_alignment: props[`home_tabs_${i}_tab_alignment`],
    content: props[`home_tabs_${i}_tab_content`],
    cta: {
      title: props[`home_tabs_${i}_tab_cta`][`title`],
      url: props[`home_tabs_${i}_tab_cta`][`url`],
      target: props[`home_tabs_${i}_tab_cta`][`target`],
    },
    icon: props[`home_tabs_${i}_tab_icon`],
    image: props[`home_tabs_${i}_tab_image`],
    title: props[`home_tabs_${i}_tab_title`],
  };
  // push the object to the array
  home_tabs_array.push(tab);
}

console.log(home_tabs_array)