时间戳

首页 > 解决方案 > 比较两组对象并使用 javascript 创建新组并形成 jsx

javascript - 比较两组对象并使用 javascript 创建新组并形成 jsx

问题描述

嗨，我是反应和 javascript 的新手

我有两组对象

设置1

const set1 = {
  men: { value: "men", label: "Men", type: "select" },
  women: { value: "women", label: "Women", type: "select" },
  kids: { value: "kids", label: "Kids", type: "select" },
};

和set2

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

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

const resultobj = {
  men: { value: "men", label: "Men", type: "select" },
  women: { value: "women", label: "Women", type: "select" },
};

我想使用 jsx exmaple 在 div 中显示来自结果 obj 的标签

return <div>{resultobj.label}</div>;

标签： javascriptreactjsreact-redux

解决方案

请尝试以下示例

const set1 = {
  men: { value: "men", label: "Men", type: "select" },
  women: { value: "women", label: "Women", type: "select" },
  kids: { value: "kids", label: "Kids", type: "select" },
};

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

// get keys of both arrays
const array1 = Object.keys(set1);
const array2 = Object.keys(set2);

// get interesction
const diff = array1.filter((entry) => array2.includes(entry));

// reduce to result object
const output = diff.reduce((previousValue, currentValue) => {
  previousValue[currentValue] = set1[currentValue];

  return previousValue;
}, {});

console.log(output);

更新 0

因为您可以有 1 个或多个结果，所以您必须列出它们，例如

return (
  <ul>
    {output.map(entry => <li>{entry.label}</li>)}
  </ul>
)

更新 1

您显示的数据格式不正确，请尝试以下操作

const data1 = {
  women: {
    value: "women",
    label: "Women",
    type: "select",
    options: {
      1: {
        label: "lady",
        value_string: "1",
      },
      2: {
        label: "girl",
        value_string: "2",
      },
    },
  },
};

for (const key in data1.women.options) {
  console.log(data1.women.options[key].label);
}

我了解您可以获得多个数据，如果是这种情况，您可以尝试以下方法

const data2 = {
  women: {
    value: "women",
    label: "Women",
    type: "select",
    options: {
      1: {
        label: "lady",
        value_string: "1",
      },
      2: {
        label: "girl",
        value_string: "2",
      },
    },
  },
  men: {
    value: "women",
    label: "Women",
    type: "select",
    options: {
      1: {
        label: "lady",
        value_string: "1",
      },
      2: {
        label: "girl",
        value_string: "2",
      },
    },
  },
};

for (const property in data2) {
  for (const key in data2[property].options) {
    console.log(data2[property].options[key].label);
  }
}

现在，要在 react 中渲染，您需要使用 map，为此您可以将每个对象传递给一个数组，然后您将在其中使用 map，请参见以下示例

按照第二个例子的逻辑

let output1 = [];

for (const property in data2) {
  for (const key in data2[property].options) {
    output1 = [...output1, data2[property].options[key]];
  }
}

return (
  <ul>
    output1.map(entry => <li>{entry.label}</li>)
  </ul>
)

看

这是一个非常常见的场景，我建议您继续参考这个答案https://stackoverflow.com/a/33034768/615274

推荐阅读