All geek questions in one place

Merge arrays with common elements and multiple data points

I am trying to combine two Javascript arrays into one array with direct Javascript.

I am trying to accomplish exactly what was asked in the following two questions. However, my data has several points that need to be combined, and not just one element; and arrays have a common element between them, which is exactly the same.

Here are some more questions:

Here is my code (which is the last answer provided by the first question mentioned above) (but obviously wrong):

let arr1 = [
            { route: 'x1' },
            { route: 'x2' },
            { route: 'x3' },
            { route: 'x4' },
            { route: 'x5' }
        ]


        let arr2 = [
            { pattern: 'y1', route: 'x1' },
            { pattern: 'y2', route: 'x1' },
            { pattern: 'y3', route: 'x2' },
            { pattern: 'y4', route: 'x2' },
            { pattern: 'y5', route: 'x3' },
            { pattern: 'y6', route: 'x3' },
            { pattern: 'y7', route: 'x4' },
            { pattern: 'y8', route: 'x4' },
            { pattern: 'y9', route: 'x5' },
            { pattern: 'y10', route: 'x5' }
        ]

        let finalArray2 = [];
        arr2.forEach(member => {
            finalArray2.push(Object.assign({}, member,
                { route: arr1.find(m => m.route === member.route).route }
            ))
        });

        console.log(finalArray2);
Run codeHide result

I really need results to look like this:

let arr3 = [
    { route: 'x1', pattern: ['y1','y2'] },
    { route: 'x2', pattern: ['y3','y4'] },
    { route: 'x3', pattern: ['y5','y6'] },
    { route: 'x4', pattern: ['y7','y8'] },
    { route: 'x5', pattern: ['y9','y10'] }
]

So that it can be represented in the table as follows:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-yw4l">ROUTE</th>
    <th class="tg-yw4l">PATTERN(s)</th>
  </tr>
  <tr>
    <td class="tg-yw4l">x1</td>
    <td class="tg-yw4l">y1, y2</td>
  </tr>
  <tr>
    <td class="tg-yw4l">x2</td>
    <td class="tg-yw4l">y3, y4</td>
  </tr>
  <tr>
    <td class="tg-yw4l">x3</td>
    <td class="tg-yw4l">y5, y6</td>
  </tr>
  <tr>
    <td class="tg-yw4l">x4</td>
    <td class="tg-yw4l">y7, y8</td>
  </tr>
  <tr>
    <td class="tg-yw4l">x5</td>
    <td class="tg-yw4l">y9, y10</td>
  </tr>
</table>
Run codeHide result
+4
4

Map .

var array1 = [{ route: 'x1' }, { route: 'x2' }, { route: 'x3' }, { route: 'x4' }, { route: 'x5' }],
    array2 = [{ pattern: 'y1', route: 'x1' }, { pattern: 'y2', route: 'x1' }, { pattern: 'y3', route: 'x2' }, { pattern: 'y4', route: 'x2' }, { pattern: 'y5', route: 'x3' }, { pattern: 'y6', route: 'x3' }, { pattern: 'y7', route: 'x4' }, { pattern: 'y8', route: 'x4' }, { pattern: 'y9', route: 'x5' }, { pattern: 'y10', route: 'x5' }],
    routes = new Map,
    result = array1.map(o => (routes.set(o.route, {}), Object.assign(routes.get(o.route), o, { pattern: [] })));

array2.forEach(o => routes.get(o.route).pattern.push(o.pattern));

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Hide result
+1

-

const arr2 = [
    { pattern: 'y1', route: 'x1' },
    { pattern: 'y2', route: 'x1' },
    { pattern: 'y3', route: 'x2' },
    { pattern: 'y4', route: 'x2' },
    { pattern: 'y5', route: 'x3' },
    { pattern: 'y6', route: 'x3' },
    { pattern: 'y7', route: 'x4' },
    { pattern: 'y8', route: 'x4' },
    { pattern: 'y9', route: 'x5' },
    { pattern: 'y10', route: 'x5' }
]

const result = arr2.reduce((acc, val) => {
  const {pattern, route} = val;
  const o = acc.find(v => v.route === route);
  if (o) {
    o.pattern.push(pattern);
  } else {
    acc.push({route, pattern: [pattern]});
  }
  return acc;
}, []);

console.log(result);
Hide result

arr1, .

let arr1 = [
   { route: 'x1' },
   { route: 'x2' },
   { route: 'x3' },
   { route: 'x4' },
   { route: 'x5' }
]

const filteredResult = 
   result.filter(r => arr1.findIndex(o => o.route === r.route) > -1);
console.log(filteredResult);
0

2- . , , :

    let map = {};
    let arr3 = arr2.reduce((newArray, item) => {
        if(!map[item.route]){
            map[item.route] = { route: item.route, pattern: [item.pattern] }
            newArray.push(map[item.route]);
        }
        else{
            map[item.route].pattern.push(item.pattern);
        }
        return newArray;
    }, []);
0

Map.

Map ( ) . , , :

const arr1 = [{ route: 'x1' }, { route: 'x2' }, { route: 'x3' }, { route: 'x4' }, { route: 'x5' }],
      arr2 = [{ pattern: 'y1', route: 'x1' }, { pattern: 'y2', route: 'x1' }, { pattern: 'y3', route: 'x2' }, { pattern: 'y4', route: 'x2' }, { pattern: 'y5', route: 'x3' }, { pattern: 'y6', route: 'x3' }, { pattern: 'y7', route: 'x4' }, { pattern: 'y8', route: 'x4' }, { pattern: 'y9', route: 'x5' }, { pattern: 'y10', route: 'x5' }];

const map = new Map(arr2.map( ({route}) => [route, { route, pattern: [] }] ));
for (const o of arr2) map.get(o.route).pattern.push(o.pattern);
const result = [...map.values()];

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Hide result

- HTML, :

const arr1 = [{ route: 'x1' }, { route: 'x2' }, { route: 'x3' }, { route: 'x4' }, { route: 'x5' }],
      arr2 = [{ pattern: 'y1', route: 'x1' }, { pattern: 'y2', route: 'x1' }, { pattern: 'y3', route: 'x2' }, { pattern: 'y4', route: 'x2' }, { pattern: 'y5', route: 'x3' }, { pattern: 'y6', route: 'x3' }, { pattern: 'y7', route: 'x4' }, { pattern: 'y8', route: 'x4' }, { pattern: 'y9', route: 'x5' }, { pattern: 'y10', route: 'x5' }];

const map = new Map(arr2.map( o => [o.route, []] ));
for (const o of arr2) map.get(o.route).push(o.pattern);

const table = document.querySelector('.tg');
for (const [route, patterns] of map) {
    const row = table.insertRow();
    row.insertCell().textContent = route;
    row.insertCell().textContent = patterns.join(', ');
}
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
<table class="tg">
  <tr>
    <th class="tg-yw4l">ROUTE</th>
    <th class="tg-yw4l">PATTERN(s)</th>
  </tr>
</table>
Hide result
0

Source: https://habr.com/ru/post/1690210/

More articles:


All Articles