![](/img/trans.png)
[英]Best way to Display Multidimensional array values in table in javascript
[英]Best way to make an array of associated values, based on multidimensional array
我需要的是,當我單擊某個單元格(例如包含“ PMS03”的單元格[2,2])時,我想要一個顯示所有包含PMS03的單元格的警報,這將是alert(“ Positions:[2 ,1],[2,2],[3,7]“);
我認為在創建“ pointmapS”(= puntmapS)的過程中我會以某種方式創建第二個數組,但是我認為最好的辦法是讓像你們這樣的專家來幫助我,因為應該有很多我可能不知道的解決方案(效率更高)。
創建映射數組:
var jPunten = JSON.parse(data);
var puntmapS = [];
var cardsS = [];
var prevCard = jPunten[0].KARTNR; //previous card starts with the first card
cardsS[0] = jPunten[0].KARTNR;
//Generate point arrays
for (var i=0;i<jPunten.length;i++)
{
if(prevCard!=jPunten[i].KARTNR){
// (fill in cardsS, saves kartnr of the rows) gap-safety for if there should be gaps in the KARTNR's, currently only used for scounter
cardsS[sCounter+1]=jPunten[i].KARTNR;sCounter++;
}
//create an array under key jPunten[i].KARTNR, if it doesn't exist already
puntmapS[sCounter] = puntmapS[sCounter] || []; // to avoid gaps we use sCounter instead of jPunten[i].KARTNR
//then, assign your value
console.log("S|| prevCard: "+ prevCard + " === " + jPunten[i].KARTNR +" (Kartnr)");
puntmapS[sCounter][jPunten[i].BITNRK-1] = jPunten[i].STATDEV; //add point to row, -1 because array starts at 0
console.log("S|| "+" --SCounter: "+ sCounter + " bit: " + jPunten[i].BITNRK + " = " + jPunten[i].STATDEV);
}
創建表:
if(puntmapS.length!=0){
table = "<table style='margin-left:20px;font-size:80%;' border='1'><tbody><tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th></tr><tr><th>"+cardsS[0]+ " S</th>";
for (var i=0;i<sCounter+1;i++)
{
for (var x=0;x<16;x++)
{
if(puntmapS[i][x]!=undefined)
{
table+= "<td><a href='#' onClick='alert(\""+puntmapS[i][x]+"\")'>"+puntmapS[i][x]+"</a></td>";
}
else
{
table += "<td style='background-color:#E6E6E6'><a href='#' onClick='alert(\"EMPTY\")'> </a></td>";
}
}
if(i<(sCounter)){
table+="</tr><tr><th>"+(cardsS[i+1])+" S</th>";
}
}
table += "</tr></table>";
}
jPunten看起來像這樣:
0
Object { 0="LSZ09 ", 1="1", 2="S", more...}
0
"LSZ09 "
1
"1"
2
"S"
3
"0"
4
"1"
5
"0"
6
"I "
BITNRK
"1"
BITSTATUS
"0"
DEVPKT
"1"
KARTNR
"0"
PKTTYP
"S"
STATDEV
"LSZ09 "
TYPE
"I "
我的主要建議是使用underscoreJS ,因為它具有用於操縱數組的許多有用的輔助函數,從而節省了很多鍵入操作。 作為您要解決的特定問題的解決方案,可以使用以下方法:
var arr = [['a', undefined], ['b', 'a']] //2x2 2D test array
var result = _.chain(arr) //Create chainable underscore object
.map(function(row, j){ //map cell values to objects containing both the value and position in the array
return _.map(row, function(cell, i){
return { pos: [i,j], value: cell };
})
})
.flatten() //Put all cells in a single array
.filter(function(cell){ //Filter the cells based on some criterium
return cell.value === 'a';
})
.map(function(cell){ //Return the position rather than the object we generated
return cell.pos;
})
.value(); //Return the original array instead of the chainable underscore object
您可以創建一個關聯數組,其中鍵為“ PMSO3”,值是一個包含位置數組的對象。
map = [];
map['PMSO3'] = {
label: 'PMS03-100',
id: 124,
positions: [{
x: 2,
y: 1
}, {
x: 2,
y: 2
}, {
x: 3,
y: 7
}]
};
console.log('PMSO3 is located at these positions\n');
map['PMSO3'].positions.forEach(function(aPosition){
console.log(aPosition.x+' '+aPosition.y+',');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.