Find matching uniqueId between array with id's and array with objects and same id's

Question

I have the following object and array that have matching Id's but because of a drag and drop feature a simple map without a find doesn't work, because they are not matching in order. I will explain.

I have this object (which is my updated values after a form submit)

data variable in my code below

{"we98Yt8JLyxkcJorf":"Kanye","yG6JiFaBBut6XgHpj":"2813348004","RcpDcF72K2aN9fub4":"[email protected]","ShBTee9MNxvRNG3XN":"123 White House Avenue","GSCZMMwscKh3ZaKix":"473 estate drive","Jmr7HoYmfXJWHMwmr":"2813348004"}

and I have this array with objects in them that correspond to the ids

cards variable in my code below

[{"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":"[email protected]"},{"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"}]}]

Now I want to update the array with the new data, there is a uniqueId field on both of them that match, but I keep failing at trying to match them and update the array so I can submit that to the db in the format it needs ot be which is it's current state.

This is what I have tried thus far it returns undefined

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

I have tried this also but it returns incorrect because it only matches it loops how many times of the array.length but doesnt keep checking, if that makes sense

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

Hope somebody can help with this. Thanks!

Answer 1

You could use combination of Array.prototype.filter() and Array.prototype.map() method to get your result. Traverse data keys using map and filter uniId by filter method and again use map to get the all the values.

const data = {
  we98Yt8JLyxkcJorf: 'Kanye',
  yG6JiFaBBut6XgHpj: '2813348004',
  RcpDcF72K2aN9fub4: '[email protected]',
  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: '[email protected]',
  },
  {
    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);