DOMの値を配列の値に置き換える

Question

私は、配列をトラバースし、その値が見つかるかどうかに応じて<table>のテキストを置き換えることになる、最適次善の解決方法を持っています。このデータを引き出しロジックをリファクタリング現時点ではオプションではありませんので、ここでは行く：

私は読むために利用可能な部門オブジェクトの配列を持っているとき、私のページのロード：また

[{id: 1, name: "Arts & Sciences"}, {id: 2, name: "Mathematics"}, {id: 3, name: "History"}] 

私は持っているビルの配列は、私は部門IDとそれに対応するビルのID

<tr> 
    <td>1</td> // Arts & Sciences 
    <td>50</td> // Building 50 
</tr> 
<tr> 
    <td>2</td> // Mathematics 
    <td>62</td> // Building 62 
</tr> 
<tr> 
    <td>3</td> // History 
    <td>21</td> // Building 21 
</tr> 

移入テーブルを持っている私のDOMに

[{id: 50, name: "Building 50"}, {id: 62, name: "Building 62"}, {id: 21, name: "Building 21"}] 

オブジェクト

2つの使用可能な配列を使用する単純な方法があるのでしょうか？テーブルの値をそれらの配列の正しい値で置き換える必要があります。

もう一度、テキストの値をプルするようにアプリのフローを変更することはできません。

ご了承ください。

Answer 1

、私はこの道を行くよ：

function arrToObj(arr, key) { 
    var res = {}; 
    for (var i = 0, a; a = arr[i]; i++) { 
     res[a[key]] = a; 
    } 
    return res; 
} 

var depsArr = [{id: 1, name: "Arts & Sciences"}, {id: 2, name: "Mathematics"}, {id: 3, name: "History"}]; 
var depsObj = arrToObj(depsArr, "id"); 

var buildsArr = [{id: 50, name: "Building 50"}, {id: 62, name: "Building 62"}, {id: 21, name: "Building 21"}]; 
var buildsObj = arrToObj(buildsArr, "id"); 

var tds = table.getElementsByTagName("td"); 
for (var i = 0, tdDep, tdBuild; (tdDep = tds[i]) && (tdBuild = tds[i+1]); i += 2) { 
    tdDep.textContent = depsObj[tdDep.textContent].name; 
    tdBuild.textContent = buildsObj[tdBuild.textContent].name; 
} 

私は、オブジェクトを作成し、テーブルをループすることにより、ループを最小化しようとしました。これは、2つの列を持つ固定テーブルを持つ動作します。 trからtrとtdとappendChild TDを作成するための

Answer 2

あなたがループに使用して、配列を反復処理し、それをオーバーライドするテーブル要素にアクセスすることができます

for(var i=0;i<buildings.length;i++){ 
    $('td').filter(function(){ 
     return $(this).text() == buildings[i].id 
    }).text(buildings[i].name); 
} 

https://jsfiddle.net/nz7gqw7g/

Answer 3

（純粋なJSに変換する方法がわからない）、これを試すにjQueryを使用することができます。表のセルへの書き込みは、このリンクで与えられる：How to insert text in a td with id, using javascript

for (var i in array) { 

     // get access to td cell 
    // write into the cell 
    // access data using array[i] 

    } 

は、これら2つのロジックはあなたのソリューションとなります組み合わせます。最初の列は部署及び第二の建物であることと、テーブルを持っ

Answer 4

Javascriptの道

使用createElement、最終的にあなたが質問の本当に低い比率を有する

var ar1=[{id: 1, name: "Arts & Sciences"}, {id: 2, name: "Mathematics"}, {id: 3, name: "History"}] 
 

 

 
var ar2=[{id: 50, name: "Building 50"}, {id: 62, name: "Building 62"}, {id: 21, name: "Building 21"}] 
 

 
var table=document.getElementById('table') 
 

 
table.innerHTML="" /*clear existing table*/ 
 

 
for(var i=0;i<ar1.length;i++){ 
 
var tr=document.createElement('tr') 
 
var td1=document.createElement('td') 
 
    td1.innerText=ar1[i].name 
 
var td2=document.createElement('td') 
 
    td2.innerText=ar2[i].name 
 
    tr.appendChild(td1) 
 
    tr.appendChild(td2) 
 
    table.appendChild(tr) 
 
}

<table id="table"></table>