Compare to arrays and display the matching values in table in Angular-CodePudding

`I have two objects of arrays and need to compare both the arrays and display the matching values in table format, I have tried by looping the both arrays and compared them with Id and here matched three of them but when I am trying to display those value in table but getting only one value

Any ideas on what's wrong here...?your text

 ar1 = [
    { id: 1, itemId: 'html' },
    { id: 2, itemId: 'css' },
    { id: 3, itemId: 'JavaScript' },
  ];


 ar2 = [
     {id:4, itemId:'function'}
    { id: 3, itemId: 'Array' },
    { id: 2, itemId: 'classes' },
    { id: 1, itemId: 'tag' },
  ];



  this.ar1.forEach((array1Item: any, i: any) => {
      this.ar2.forEach((array2Item: any, j: any) => {
        if (array1Item.id === array2Item.id) {
        
          this.matchedValues= array2Item.itemId;
        }
      });
    });



<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Tech</th>
      <th>Key Words</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let tech of ar1">
      <td>
        {{ data.id }}
      </td>
      <td>{{ tech.itemId }}</td>
      <td>{{ matchedValues}}</td>
    </tr>
  </toddy>
</table>

results:

id   tech         keyword
1    HTML          Array
2    Css           Array
3    JavasCript    Array

results want:

id   tech         keyword
1    HTML          Tag
2    CSS           Classes
3    JavaScript    Array`

CodePudding user response：

change your forEach to this and it should work.

const ar1 = [
    { id: 1, itemId: 'html' },
    { id: 2, itemId: 'css' },
    { id: 3, itemId: 'JavaScript' },
];


const ar2 = [
    { id: 4, itemId: 'function' },
    { id: 3, itemId: 'Array' },
    { id: 2, itemId: 'classes' },
    { id: 1, itemId: 'tag' },
];

ar1.forEach(a1 => {
    a1.matchedValues = ar2.find(a2 => a2.id === a1.id).itemId;
});

console.log(ar1);

CodePudding user response：

const ar1 = [
    { id: 1, itemId: "html" },
    { id: 2, itemId: "css" },
    { id: 3, itemId: "JavaScript" },
];

const ar2 = [
    { id: 4, itemId: "function" },
    { id: 3, itemId: "Array" },
    { id: 2, itemId: "classes" },
    { id: 1, itemId: "tag" },
];

const nwMap = new Map();
for (const item of ar2) nwMap.set(item.id, item.itemId);

const matchedArray = ar1.map((el, i) => ({ ...el, matchedValues: nwMap.get(el.id) }));
console.log(matchedArray);

CodePudding user response：

const ar1 = [
    { id: 1, itemId: 'html' },
    { id: 2, itemId: 'css' },
    { id: 3, itemId: 'JavaScript' },
];


const ar2 = [
    { id: 4, itemId: 'function' },
    { id: 3, itemId: 'Array' },
    { id: 2, itemId: 'classes' },
    { id: 1, itemId: 'tag' },
];

const matchedItems = [];
for (const a of ar1) {
    const id = a.id
    const fiter =  ar2.find(x => x.id === id);
    matchedItems.push({
        ...a,
        keyword: fiter.itemId
    })
}

console.log(matchedItems)

CodePudding user response：

Here is a more performant and concise way to transform the elements of ar1 by matching them with the corresponding elements in ar2

It uses the Array.prorotype.reduce() method to create ar2Hash a hash map of the elements in ar2, using the id as the key. This allows us to quickly lookup the matching element in ar2 for each element of ar1 using the id as the key

Code:

const ar1 = [{ id: 1, itemId: "html" },{ id: 2, itemId: "css" },{ id: 3, itemId: "JavaScript" }]
const ar2 = [{ id: 4, itemId: "function" },{ id: 3, itemId: "Array" },{ id: 2, itemId: "classes" },{ id: 1, itemId: "tag" }]

const ar2Hash = ar2.reduce((a, c) => (a[c.id] ??= c, a), {})
const result = ar1.map(a1 => ar2Hash[a1.id] ? { ...a1, matchedValues: ar2Hash[a1.id].itemId } : a1)

console.log(result)