访问内部对象并形成 Jsx

Question

我有两组对象

const obj1 = {
    men: {
      value: "men",
      attribute_label: "Men",
      type: "select",
      attribute_options: {
        1: { label: "infant", value_string: "1" },
        2: { label: "baby", value_string: "2" }
      }
    },
    women: {
      value: "women",
      attribute_label: "Women",
      type: "select",
      attribute_options: {
        1: { label: "infant", value_string: "1" },
        2: { label: "baby", value_string: "2" }
      }
    },
    kids: {
      value: "kids",
      attribute_label: "Kids",
      type: "select",
      attribute_options: {
        7: { label: "infant", value_string: "1" },
        8: { label: "baby", value_string: "2" }
      }
    }
  };

和设置2

const obj2 = {
men: { code: "men", title: "Men" },
women: { code: "men", title: "Men" }
};

我想比较这两个对象集，如果键相同，我想将结果作为新对象获得

    const resultobj = {
     men: {
  value: "men",
  attribute_label: "Men",
  type: "select",
  attribute_options: {
    1: { label: "infant", value_string: "1" },
    2: { label: "baby", value_string: "2" }
  }
},
women: {
  value: "women",
  attribute_label: "Women",
  type: "select",
  attribute_options: {
    1: { label: "infant", value_string: "1" },
    2: { label: "baby", value_string: "2" }
  }
}
    };

我想从结果 obj 中显示标签并在选项中显示标签。我在 Men 中有标签，在选项里面我有其他 2 个标签的男孩和家伙。在女性的情况下也是如此。所以我也想在选项中显示值。我已经提到的示例格式。

Men 

boy Guy

Women

Lady  Girl

Answer 1

const set1 = {
          men: {value: 'men',label: 'Men',type: 'select',
        options: [
          { 1: { label: 'boy', value_string: '1' } },
          { 2: { label: 'Guy', value_string: '2' } },
        ],
      },
      women: {value: 'women',label: 'Women',type: 'select',
        options: [
          { 1: { label: 'lady', value_string: '1' } },
          { 2: { label: 'girl', value_string: '2' } },
        ],
      },
      kids: {value: 'kids',label: 'Kids',type: 'select',
        options: [
          { 1: { label: 'infant', value_string: '1' } },
          { 2: { label: 'baby', value_string: '2' } },
        ],
      },
        };

const set2 = {
  men: { code: "men", title: "Men" },
  women: { code: "Women", title: "Women" },
};



let keys = Object.keys(set1).filter(key => key in set2)

let result = {} 
keys.forEach((key)=>{
      result = {...result,...{[key]:set1[key]}}
})

console.log(result)

用于显示标签

{Object.keys(result).map(key => {
    return (
      <Fragment key={key}>
        <h3>{result[key].attribute_label}</h3>
        {Object.values(result[key].attribute_options).map(option => (
          <span key={option.value_string} style={{ paddingRight: "10px" }}>
            {option.label}
          </span>
        ))}
      </Fragment>
    );
  })}

工作链接https://codesandbox.io/s/winter-dream-x3vi7?file=/src/App.js

Answer 2

将options 视为一个对象数组，您可以使用以下实用程序从set1 中获取set2 的匹配项。

const set1 = {
  men: {
    value: 'men',
    label: 'Men',
    type: 'select',
    options: [
      { 1: { label: 'boy', value_string: '1' } },
      { 2: { label: 'Guy', value_string: '2' } },
    ],
  },
  women: {
    value: 'women',
    label: 'Women',
    type: 'select',
    options: [
      { 1: { label: 'lady', value_string: '1' } },
      { 2: { label: 'girl', value_string: '2' } },
    ],
  },
  kids: {
    value: 'kids',
    label: 'Kids',
    type: 'select',
    options: [
      { 1: { label: 'infant', value_string: '1' } },
      { 2: { label: 'baby', value_string: '2' } },
    ],
  },
}

const set2 = {
  men: { code: 'men', title: 'Men' },
  women: { code: 'men', title: 'Men' },
}

let finalObj = Object.keys(set2).reduce((result, key) => {
  result[key] = set1[key]
  return result
}, {})

console.log(finalObj)

这里finalObj 将包含结果对象，您可以使用它在 UI 中显示标签。

这里是 link 在 React 应用程序中显示的工作示例。我刚刚创建了一个示例应用程序，我在其中使用了该实用程序来格式化数据，并使用相同的数据以您想要的方式显示。

希望这会有所帮助。

Answer 3

我可以在这里帮助您比较对象，您可以先获取对象的条目并应用过滤器，然后在其中查看键是否包含在第二个对象中。完成后您可以使用Object.fromEntries 创建新对象。这是工作示例：

var set1 = {
  men: { value: "men", label: "Men", type: "select", "options": [ {label: "boy", value_string: "1"}, {label: "Guy", value_string: "2"}] },
  women: { value: "women", label: "Women", type: "select", "options": [ {label: "lady", value_string: "1"} , {label: "girl", value_string: "2"}] },
  kids: { value: "kids", label: "Kids", type: "select" ,"options": [ {label: "infant", value_string: "1"} , {label: "baby", value_string: "2"}] },
};

var set2 = {
  men: { code: "men", title: "Men" },
  women: { code: "men", title: "Men" },
};

var filteredObj = Object.fromEntries(Object.entries(set1).filter(([k,v])=>Object.keys(set2).includes(k)));

console.log(filteredObj);