I have two arrays in JavaScript that I need to combine into a table.
First Array:
[
{ route: 'x1' },
{ route: 'x2' },
{ route: 'x3' },
{ route: 'x4' },
{ route: 'x5' }
]
Second Array:
[
{ 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' }
]
The desired table layout is as follows:
| ROUTE | PATTERN(s) |
|---|---|
| x1 | y1, y2 |
| x2 | y3, y4 |
| x3 | y5, y6 |
| x4 | y7, y8 |
| x5 | y9, y10 |
I have the code working to generate both arrays from API calls. I also have a function to search for patterns based on a specific route in the second array.
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);The HTML table for the first array looks like this:
| ROUTE |
|---|
| {{this.route}} |
I am struggling with creating a function that can match each object in the first array with the corresponding patterns in the second array dynamically.
Any help in simplifying the HTML code by achieving this would be greatly appreciated!
An ideal HTML structure would be:
| ROUTE | |
|---|---|
| {{this.route}} | {{/each}} {{#each queryarray2}}{{this.matchedpatterns}} | {{/each}}