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!

phi-rakib · Accepted Answer · 2020-11-15 15:47:21Z

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

edited Nov 15, 2020 at 15:47

answered Nov 15, 2020 at 15:25

phi-rakib

3,3222 gold badges12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anders Kitson Over a year ago

hmm, what that data I want in the end is the same format of the cards array with the values updated from data, for example I want the id GSCZMMwscKh3ZaKix form the data value 473 estate drive to update that uniId's value object in the cards array so it would be[... {inputType:'multipleChoice',unId:GSCZMMwscKh3ZaKix,value:473 estate drive}...] For that I'd your result still has the number 2183348004 but data variable has the updated value which is 473 estate drive for the value. And I want the entire array at the end with every object in it as the result.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related