时间戳

首页 > 解决方案 > 访问内部对象并形成 Jsx

javascript - 访问内部对象并形成 Jsx

问题描述

我有两组对象

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

和 set2

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

标签： javascriptreactjs

解决方案

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

推荐阅读