用键中的数字从平面 object 中创建新的对象数组

Question

鉴于此 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"
}

我怎样才能将它重新映射到这样的东西？

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',
  },
];

我目前的尝试是这样的：

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

但那是 [] 的编号 go b/c。 但我不知道如何访问密钥中间的数字。

也许我什至以错误的方式看待这个？ 如何获取传入的object的key里面的号码？

Answer 1

这是一个通过遍历数据属性构造选项卡数组的答案：

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

Answer 2

您应该在 object 属性选择期间使用字符串插值，如下所示：

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

Answer 3

我们可以使用模板文字来获取动态值

注意：注意cta里面的属性，我们需要像下面这样获取值

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

测试代码：

 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)