我有两个 Javascript 数组，如下所示。
数组 1：
[
{ route: 'x1' },
{ route: 'x2' },
{ route: 'x3' },
{ route: 'x4' },
{ route: 'x5' }
]
数组 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' }
]
我想将它们组合成一个如下所示的表格。
<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>我有代码可以从 API 调用中生成两个列表。我什至将函数写入基于硬编码路线的搜索数组 2 并返回相应的模式。
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);
对于第一个数组，我的 HTML 表看起来像这样。
<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>
我正在努力使第二部分正常工作。整部作品的关键，在我看来，这都是动态数据。
任何有关创建一个函数的帮助，该函数可以采用第一个数组并在第二个数组上搜索第一个数组中的每个对象并吐出另一个我可以用另一个“#each”语句引用的数组将不胜感激（如果在一切可能）将不胜感激！
如果我可以用这样的方式简化 HTML 代码，我会很高兴的。
<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>
我能够按照我需要的方式让它全部工作，这是更扁平的组合而不是键/数组组合。
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);本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句