JavaScriptオブジェクト配列をHTMLのテーブルとして出力するにはどうすればよいですか？

Question

var data = new Array(3) 
data[0] = [4, "New Orleans",24]; 
data[1] = [7, "Houston",89]; 
data[2] = [2, "Los Angeles",47]; 

document.write(data); 

上記のコードをHTMLのテーブルとして出力し、配列の最初の列に基づいて降順でソートします。したがってが最初に出力され、次にdata[0]、次にdata[2]が出力されます。

Answer 1

あなたのコードから始めます。

最初に、最初の列の順序で印刷するように並べ替える必要があります。

配列をソートするには、array.sort(function(A, B) { /* comparator function */ })を呼び出します。コンパレータは、AがBより小さい場合は-1を返し、AがBより大きい場合は1を返し、AとBが等しい場合は0を返す2つの引数をとる関数です。あなたは、最初の列の降順でソートしたいので、次のようになります。

data.sort((a, b) => (a[0] > b[0] ? 1 : -1)); 

これはaの最初の要素がbの最初の要素よりも大きい場合と言うための空想速記である、ということを意味する（1を返しますa）それ以外の場合は-1を返します。

array.sortの場合、配列はで、にソートされています。 sortメソッドを呼び出すと、（配列のソートされたコピーを返す代わりに）永続的にソートされます。

ここでテーブルを作成します。 document.write()を使用する代わりに、DOMを直接操作する必要があります（この質問を参照してください：Dynamic creation of table with DOM参照）。

以下は、これを行うための最も効率的な方法ではありませんが、フォローする初心者のための最も簡単でなければなりません：

var table = document.createElement('table'); 
for (var i = 0; i < data.length; i++) { 
    var tr = document.createElement('tr'); 
    var td1 = document.createElement('td'); 
    var td2 = document.createElement('td'); 
    var td3 = document.createElement('td'); 

    var text1 = document.createTextNode(data[i][0]); 
    var text2 = document.createTextNode(data[i][1]); 
    var text3 = document.createTextNode(data[i][2]); 

    td1.appendChild(text1); 
    td2.appendChild(text2); 
    td3.appendChild(text3); 

    tr.appendChild(td1); 
    tr.appendChild(td2); 
    tr.appendChild(td3); 
    table.appendChild(tr); 
} 
// Adds the table to the page so you see it -- up until this moment, 
// we've just been preparing a table in memory. 
document.body.appendChild(table); 

出来上がり！テーブルが表示されます。