データをJavascriptでテーブルに整理する

Question

私は、書類を整理して整理し、mongodbからexpressからejsテンプレートに引っ張る必要がある約5kの文書を持っています。私は文書をejsテンプレートにうまく取り込めましたが、私はプロジェクトの第2の部分に取り組むのに苦労しています。データを整理する。

以下は、データの表示例です。私の目的は、一番左の列（全部で約30個）にすべての欠陥箇所を列挙し、それぞれの年と月に欠陥箇所が何回発生するかを数えることです。私はフレームワークやjqueryの使用に反対していません。私が考えることができる唯一のことは、そのセルの要件に一致するかどうかを調べるために、配列を反復する各セルに関数を割り当てることです。 （しかし、これはプログラミングが意図されているものに反しているようです）。最終的には、グラフを追加したいと思いますが、現時点では、これは実際には遠いものです。これは、彼らがにまでさかのぼる2012として2017以下

[{ 
    "_id": "59cee5ce8ffdc0134854f0c1", 
    "repairorder": 7192822, 
    "month": 2, 
    "year": 2015, 
    "defectlocation": "MB" 
    }, { 
    "_id": "59cee5ce8ffdc0134854f0c2", 
    "repairorder": 7192822, 
    "month": 5, 
    "year": 2015, 
    "defectlocation": "COVER/HOUSING" 
    }, { 
    "_id": "59cee5ce8ffdc0134854f0c3", 
    "repairorder": 7192822, 
    "month": 2, 
    "year": 2015, 
    "defectlocation": "MB" 
    }, { 
    "_id": "59cee5ce8ffdc0134854f0c5", 
    "repairorder": 7192822, 
    "month": 3, 
    "year": 2015, 
    "defectlocation": "TOUCH PAD" 
    }, { 
    "_id": "59cee5ce8ffdc0134854f0c6", 
    "repairorder": 7192822, 
    "month": 4, 
    "year": 2015, 
    "defectlocation": "MB" 
    }] 

まで伸ばし、私が使用する唯一の日付範囲ではありませんアドオンすることの一つは、私はディスプレイにそれを必要とする方法である：

----------------------------------------------------------------------- 
    Defect Location | 01-2015 | 02-2015 | 03-2015 | 04-2015 | 05-2015 | 
    ----------------------------------------------------------------------- 
    MB    |   | 2  |   | 1  |   | 
    ----------------------------------------------------------------------- 
    Touch Pad  |   |   |  1 |   |   | 
    ----------------------------------------------------------------------- 
    Cover/ Housing |   |   |   |   |  1 | 
    ----------------------------------------------------------------------- 
    TOTAL   |   |  2 |  1 |  1 |  1 | 

Answer 1

あなたの質問のように聞こえるのは、各タイムスロット内の各欠陥位置のインスタンスを数えるためのデータの構成方法です。これは動作します。これを短縮することができますが、私はjsを読みやすいようにしようとしました。エンドポイントから、datatables.netなどの任意のテーブルライブラリを使用するか、Mikeyの答えが示すように手動でhtmlテーブルを作成することができます。お役に立てれば。

***アップデート：最初はTOTAL行を見落としていました。私はそれを（そして配列の最後の行として）含めるように答えを更新しました。私はまた、あなたの希望の最終結果の例がそのように表示されているので、年に一度、次に月に列をソートすることを追加し、コードを2つの関数に分けて読みやすくしました。

var data = [{ 
    "_id": "59cee5ce8ffdc0134854f0c1", 
    "repairorder": 7192822, 
    "month": 2, 
    "year": 2015, 
    "defectlocation": "MB" 
    }, { 
    "_id": "59cee5ce8ffdc0134854f0c2", 
    "repairorder": 7192822, 
    "month": 5, 
    "year": 2015, 
    "defectlocation": "COVER/HOUSING" 
    }, { 
    "_id": "59cee5ce8ffdc0134854f0c3", 
    "repairorder": 7192822, 
    "month": 2, 
    "year": 2015, 
    "defectlocation": "MB" 
    }, { 
    "_id": "59cee5ce8ffdc0134854f0c5", 
    "repairorder": 7192822, 
    "month": 3, 
    "year": 2015, 
    "defectlocation": "TOUCH PAD" 
    }, { 
    "_id": "59cee5ce8ffdc0134854f0c6", 
    "repairorder": 7192822, 
    "month": 4, 
    "year": 2015, 
    "defectlocation": "MB" 
    }]; 

    var tableData = {}; 
    var totalRow = {}; 
    var allCols = []; 
    var asArray = []; 

    tallyInstances(); 
    prepForTable(); 

    function tallyInstances() { 
    var i; 
    var monthDate; 
    for (i = 0; i < data.length; i++) { 
     monthDate = data[i].month.toString() + '-' + data[i].year.toString(); 
     allCols.indexOf(monthDate) < 0 ? allCols.push(monthDate) : null; 
     if (!tableData[data[i].defectlocation]) { 
     tableData[data[i].defectlocation] = {}; // if our tableData object doesn't have a property for this defect location yet then add it and make it an object 
     } 
     if (tableData[data[i].defectlocation][monthDate]) { 
     tableData[data[i].defectlocation][monthDate] ++; // if this defect location object has a property for this year/month combination already then increment it's value by one 
     } else { 
     tableData[data[i].defectlocation][monthDate] = 1; // if this defect location object does not have a property for this year/month combination yet then create the property and give it a value of 1 
     } 
     totalRow[monthDate] ? totalRow[monthDate] ++ : totalRow[monthDate] = 1; // ternary operator saying if the totalRow object already has a property for this year/month combination then increment it's value by one, otherwise create it and give it a value of 1 
    } 
    } 

    function prepForTable() { 
    allCols.sort(function(a, b) { 
     var aParts = a.split("-"); 
     var bParts = b.split("-"); 
     var x = { 
     month : aParts[0], 
     year : aParts[1] 
     }; 
     var y = { 
     month : bParts[0], 
     year : bParts[1] 
     }; 
     var n = x.year - y.year; 
     if (n !== 0) { 
     return n; 
     } 
     return x.month - y.month; 
    }); 
    var keys = Object.keys(tableData); 
    var e; 
    var rowObj; 
    for (e = 0; e < keys.length; e++) { 
     rowObj = {}; 
     rowObj["Defect Location"] = keys[e]; 
     var a; 
     for (a = 0; a < allCols.length; a++) { 
     rowObj[allCols[a]] = tableData[keys[e]][allCols[a]] ? tableData[keys[e]][allCols[a]] : ''; 
     } 
     asArray.push(rowObj); 
    } 
    rowObj = {}; 
    rowObj["Defect Location"] = "TOTAL"; 
    var o; 
    for (o = 0; o < allCols.length; o++) { 
     rowObj[allCols[o]] = totalRow[allCols[o]] ? totalRow[allCols[o]] : ''; 
    } 
    asArray.push(rowObj); 
    } 

    console.log("tableRows: ", JSON.stringify(asArray, null, 4)); 
    /* 
tableRows: [ 
    { 
     "Defect Location": "MB", 
     "2-2015": 2, 
     "3-2015": "", 
     "4-2015": 1, 
     "5-2015": "" 
    }, 
    { 
     "Defect Location": "COVER/HOUSING", 
     "2-2015": "", 
     "3-2015": "", 
     "4-2015": "", 
     "5-2015": 1 
    }, 
    { 
     "Defect Location": "TOUCH PAD", 
     "2-2015": "", 
     "3-2015": 1, 
     "4-2015": "", 
     "5-2015": "" 
    }, 
    { 
     "Defect Location": "TOTAL", 
     "2-2015": 2, 
     "3-2015": 1, 
     "4-2015": 1, 
     "5-2015": 1 
    } 
] 

*/ 

Answer 2

主な考え方は、理想的なテーブルを簡単に構築できるデータ構造にデータを再構築することです。

のは、ネストされたオブジェクトにオブジェクトのあなたの配列を変更してみましょう：

var deflects = { 
    'MB': { 
     '02-2015': 2, 
     '04-2015': 1 
    }, 
    'TOUCH PAD': { 
     '03-2015': 1 
    } 
    'COVER/HOUSING': { 
     '05-2015': 1 
    }, 
    'TOTAL': { 
     '02-2015': 2, 
     '03-2015': 1, 
     '04-2015': 1, 
     '05-2015': 1 
    } 
}; 

var data = [{ 
 
    "_id": "59cee5ce8ffdc0134854f0c1", 
 
    "repairorder": 7192822, 
 
    "month": 2, 
 
    "year": 2015, 
 
    "defectlocation": "MB" 
 
    }, { 
 
    "_id": "59cee5ce8ffdc0134854f0c2", 
 
    "repairorder": 7192822, 
 
    "month": 5, 
 
    "year": 2015, 
 
    "defectlocation": "COVER/HOUSING" 
 
    }, { 
 
    "_id": "59cee5ce8ffdc0134854f0c3", 
 
    "repairorder": 7192822, 
 
    "month": 2, 
 
    "year": 2015, 
 
    "defectlocation": "MB" 
 
    }, { 
 
    "_id": "59cee5ce8ffdc0134854f0c5", 
 
    "repairorder": 7192822, 
 
    "month": 3, 
 
    "year": 2015, 
 
    "defectlocation": "TOUCH PAD" 
 
    }, { 
 
    "_id": "59cee5ce8ffdc0134854f0c6", 
 
    "repairorder": 7192822, 
 
    "month": 4, 
 
    "year": 2015, 
 
    "defectlocation": "MB" 
 
}]; 
 

 
function pad(n, width, z) { 
 
    z = z || '0'; 
 
    n = n + ''; 
 
    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; 
 
} 
 

 
// PART 1: create object i.e. dictionary 
 

 
// create a dictionary where each key is the defectlocation 
 
// and its value is another dictionary; 
 

 
// each inner dictionary will have a key for each date found 
 
// and its value as a counter 
 
var defects = {}; 
 

 
// let's create another inner dictionary for tallying 
 
defects.TOTAL = {}; 
 

 
data.forEach(function (d) { 
 
    if (!defects.hasOwnProperty(d.defectlocation)) { 
 
     defects[d.defectlocation] = {}; 
 
    } 
 

 
    var date = pad(d.month, 2) + '-' + d.year; 
 
    if (!defects[d.defectlocation].hasOwnProperty(date)) { 
 
     defects[d.defectlocation][date] = 0; 
 
    } 
 
    defects[d.defectlocation][date]++; 
 
    
 
    if (!defects.TOTAL.hasOwnProperty(date)) { 
 
     defects.TOTAL[date] = 0; 
 
    } 
 
    defects.TOTAL[date]++; 
 
}); 
 

 
var dates = Object.keys(defects.TOTAL).sort(); 
 

 
// you would pass deflects and dates into your view 
 

 
// PART 2: build the table (view) 
 

 
var html = '<table>'; 
 
html += '<tr>'; 
 
html += '<th>Defect Location</th>'; 
 
dates.forEach(function (date) { 
 
    html += '<th>' + date + '</th>'; 
 
}); 
 
html += '</tr>'; 
 

 
['MB', 'TOUCH PAD', 'COVER/HOUSING', 'TOTAL'].forEach(function (location) { 
 
    html += '<tr>'; 
 
    html += '<td>' + location + '</td>'; 
 
    dates.forEach(function (date) { 
 
     html += '<td>' + (defects[location][date] || '') + '</td>'; 
 
    }); 
 
    html += '</tr>'; 
 
}) 
 

 
html += '</table>'; 
 

 
document.getElementById('preview').innerHTML = html;

table { 
 
    border-collapse: collapse; 
 
} 
 
th, td { 
 
    border: 1px solid #000; 
 
} 
 
th:first-child { 
 
    text-align: left; 
 
} 
 
td:not(:first-child) { 
 
    text-align: center; 
 
}

<div id="preview"></div>

PART 2におけるHTMLジェネレータはEJS形式ではありません、が、あなたはそれを容易に構築することができます同じ論理に従う。第1部は重要な部分です。

また、このパディングロジックはanswerから取得しました。