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_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);
}

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?

CodePudding user response：

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);

CodePudding user response：

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);
}

CodePudding user response：

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)

CodePudding user response：

To access the number inside the key of the object, you can use bracket notation instead of dot notation. Bracket notation allows you to use a variable in the key name. In your case, you can use the loop index variable i inside the brackets to access each property.

Here is an example of how you could update your code to use bracket notation:

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"
}


const count = data.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: data[`home_tabs_${i}_tab_alignment`],
    content: data[`home_tabs_${i}_tab_content`],
    cta: {
      title: data[`home_tabs_${i}_tab_cta`].title,
      url: data[`home_tabs_${i}_tab_cta`].url,
      target: data[`home_tabs_${i}_tab_cta`].target,
    },
    icon: data[`home_tabs_${i}_tab_icon`],
    image: data[`home_tabs_${i}_tab_image`],
    title: data[`home_tabs_${i}_tab_title`],
  };
  // push the object to the array
  home_tabs_array.push(tab);
}

console.log({home_tabs_array})

CodePudding user response：

const data = { home_tabs: 2, home_tabs_0_tab_alignment: "left", home_tabs_0_tab_content: "

hello world

", 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: "new world", 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" }