Query Javascript Array with Another Array for Dynamic Table Creation

Question

I have two Javascript arrays that look like the following.

Array 1:

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

Array 2:

[ 
{ 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' }
]

I want to combine them into a table that looks like the following.

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

I have the code working to generate both of the lists from API calls. I even have the function written to search array 2 based on a hard coded route and return the corresponding patterns.

function search(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
      if (myArray[i].route === nameKey) {
    return myArray[i];
        }
     }
   }

   var resultObject = search("x1", array2);
   console.log(resultObject);

My HTML table looks like this for the first array.

<table class="table table-hover table-condensed">
<caption>Routes and Corresponding Parts</caption>
<thread>
<tr>
<th>ROUTE</th>
</tr>
</thread>
<tbody>
{{#each array1}}
<tr>
<td>{{this.route}}</td>
</tr>
{{/each}}
</tbody>
</table>

I am stumbling trying to get the second part working. The monkey wrench in the whole works, in my mind, is that this is all dynamic data.

Any help with creating a function that can take the first array and do a search on the second array for each object in the first array and spit out another array that I can reference with another "#each" statement would be greatly appreciated (if at all possible) would be greatly appreciated!

I'd love it if I could be simplistic on the HTML code with something like this.

<table class="table table-hover table-condensed">
<caption>Routes and Corresponding Parts</caption>
<thread>
<tr>
<th>ROUTE</th>
</tr>
</thread>
<tbody>
<tr>
{{#each array1}}
<td>{{this.route}}</td>
{{/each}}
{{#each queryarray2}}
<td>{{this.matchedpatterns}}</td>
{{/each}}
</tr>
</tbody>
</table>

SO is not a code-writing service. please include code you've tried and where you're having problems — Cruiser, Nov 22 '17 at 21:07
Thank you, Sir! Definitely didn't mean it as such. I have added my search function to my question. My question was more of a logic question as to how to tackle the task rather than spoon feed me code. — Andrew Petersen, Nov 25 '17 at 04:50

score 0 · Answer 1 · answered Nov 22 '17 at 21:04

0

You can do

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 result = arr2.reduce((a, b)=> {
  a[b.route] = a[b.route] || [];
  a[b.route].push(b.pattern);
  return a;
}, {});

console.log(result);

Now you have an object who's key is the route and values is an array

answered Nov 22 '17 at 21:04

marvel308

10,288
1
21
32

O, sweet! I wouldn't have thought of that. I'll give it a try. – Andrew Petersen Nov 25 '17 at 04:53
I gave this a try an worked with the code. However, I found out this question (https://stackoverflow.com/questions/30286520/merge-two-arrays-matching-an-id) and need to organize the data the same as what is asked in that question instead of with a key value. Would that be possible? – Andrew Petersen Dec 02 '17 at 18:12

score 0 · Accepted Answer · answered Dec 04 '17 at 17:30

I was able to get it all to work the way I needed it which is more flat combination rather than the key/array combination.

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'
    }
]

routes = new Map,
result = arr1.map(o => (routes.set(o.route, {}), Object.assign(routes.get(o.route), o, { pattern: [] })));
arr2.forEach(o => routes.get(o.route).pattern.push(o.pattern));

console.log(result);

Query Javascript Array with Another Array for Dynamic Table Creation

2 Answers2