在具有 id 的数组和具有对象和相同 id 的数组之间查找匹配的 uniqueId

Question

我有以下具有匹配 ID 的对象和数组，但由于拖放功能，没有查找的简单地图不起作用，因为它们没有按顺序匹配。我会解释的。

我有这个对象（这是我在提交表单后更新的值）

data 下面我的代码中的变量

{"we98Yt8JLyxkcJorf":"Kanye","yG6JiFaBBut6XgHpj":"2813348004","RcpDcF72K2aN9fub4":"kanye@usa.gov","ShBTee9MNxvRNG3XN":"123 White House Avenue","GSCZMMwscKh3ZaKix":"473 estate drive","Jmr7HoYmfXJWHMwmr":"2813348004"}

我有这个数组，其中包含对应于 id 的对象

cards 下面我的代码中的变量

[{"inputType":"shortText","uniId":"we98Yt8JLyxkcJorf","label":"First Name:","value":"Kanye"},{"inputType":"phoneNumber","uniId":"yG6JiFaBBut6XgHpj","label":"Cell Phone Number","value":"2813348004"},{"inputType":"email","uniId":"RcpDcF72K2aN9fub4","label":"Work Email","value":"kanye@usa.gov"},{"inputType":"multipleChoice","uniId":"GSCZMMwscKh3ZaKix","label":"Preferred Method of Contact","value":"2813348004","options":[{"uniId":"poXf65zi8NDko5Je4","label":"Email"},{"uniId":"FmvYT4cbY8JotAaqA","label":"Cell Phone"}]},{"inputType":"Address","uniId":"ShBTee9MNxvRNG3XN","label":"Home Address","value":"123 White House Avenue"},{"inputType":"dropDown","uniId":"Jmr7HoYmfXJWHMwmr","label":"How did you find us?","value":"2813348004","options":[{"uniId":"EQj9MXdnaBjmCkAKZ","label":"Google"},{"uniId":"EbbhhqSd4K6sAsQ3T","label":"Referral"}]}]

现在我想用新数据更新数组，它们都有一个匹配的 uniqueId 字段，但我一直未能尝试匹配它们并更新数组，因此我可以将其提交到它需要的格式不是它的当前状态。

这是我迄今为止尝试过的，它返回未定义

   const test = Object.keys(data);

    console.log(test);

    let testArray = [];

    test.map((item) => {
      let testArraySingle = cards.find((x) => {
        x.uniId === item;
      }).value;

      testArray.push(testArraySingle);
    });

    console.log(testArray);

我也试过这个，但它返回不正确，因为它只匹配它循环 array.length 的次数，但不继续检查，如果这有意义的话

const dataArray = Object.entries(data);

    let newArray = [];

    cards.map((card, i) => {
      var checkId = dataArray[i][0];

      let matchesArray = [];

      if (card.uniId === checkId) {
        const new_obj = { ...cards[i], value: dataArray[i][1] };
        newArray.push(new_obj);
      }
      // }
    });

希望有人可以帮助解决这个问题。谢谢！

Answer 1

您可以结合使用Array.prototype.filter() 和Array.prototype.map() 方法来获得结果。使用map遍历数据键，通过filter方法过滤uniId，再次使用map获取所有值。

const data = {
  we98Yt8JLyxkcJorf: 'Kanye',
  yG6JiFaBBut6XgHpj: '2813348004',
  RcpDcF72K2aN9fub4: 'kanye@usa.gov',
  ShBTee9MNxvRNG3XN: '123 White House Avenue',
  GSCZMMwscKh3ZaKix: '473 estate drive',
  Jmr7HoYmfXJWHMwmr: '2813348004',
};

const cards = [
  {
    inputType: 'shortText',
    uniId: 'we98Yt8JLyxkcJorf',
    label: 'First Name:',
    value: 'Kanye',
  },
  {
    inputType: 'phoneNumber',
    uniId: 'yG6JiFaBBut6XgHpj',
    label: 'Cell Phone Number',
    value: '2813348004',
  },
  {
    inputType: 'email',
    uniId: 'RcpDcF72K2aN9fub4',
    label: 'Work Email',
    value: 'kanye@usa.gov',
  },
  {
    inputType: 'multipleChoice',
    uniId: 'GSCZMMwscKh3ZaKix',
    label: 'Preferred Method of Contact',
    value: '2813348004',
    options: [
      { uniId: 'poXf65zi8NDko5Je4', label: 'Email' },
      { uniId: 'FmvYT4cbY8JotAaqA', label: 'Cell Phone' },
    ],
  },
  {
    inputType: 'Address',
    uniId: 'ShBTee9MNxvRNG3XN',
    label: 'Home Address',
    value: '123 White House Avenue',
  },
  {
    inputType: 'dropDown',
    uniId: 'Jmr7HoYmfXJWHMwmr',
    label: 'How did you find us?',
    value: '2813348004',
    options: [
      { uniId: 'EQj9MXdnaBjmCkAKZ', label: 'Google' },
      { uniId: 'EbbhhqSd4K6sAsQ3T', label: 'Referral' },
    ],
  },
];

const ret = Object.keys(data)
  .map((x) => {
    const tmp = cards
      .filter((y) => y.uniId === x)
      .map((z) => {
        const obj = { ...z };
        obj.value = data[x];
        return obj;
      });
    return tmp;
  })
  .flat();
console.log(ret);