Replacing Values on DOM with Values of an Array

Question

I have a sub-optimal solution I'm going for that involves traversing arrays and replacing text in a <table> depending if those values are found. At the moment refactoring the logic that pulls this data is not an option, so here it goes:

I have an array of Department objects that are available to read when my page loads:

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

I also have an array of Building objects

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

On my DOM I have a table populated with Department IDs and their corresponding Building IDs

<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>

I'm wondering if there's a simple-ish way to use the two available arrays I have to replace the values in my table with the correct values of those arrays.

Again, I cannot change the flow of the app to pull the textual values instead, as much as I'd like to.

Any input is appreciated!

You have a really low ratio of questions/accepted answers. You should start to accept answers on your questions, as people put effort into helping you. If you don't do so, you will receive less help as people will notice that you are not grateful to the people that try to help you. — Jorge Fuentes González, Jul 24 '17 at 01:20
Thanks Jorge, I'll be more proactive with this, please don't think I'm not grateful for the SO community — Clay Banks, Jul 24 '17 at 03:49

score 1 · Accepted Answer · answered Mar 16 '17 at 17:44

Having a table with the first column being the Departments and the second the Buildings, I'll go this way:

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;
}

I tried to minimize loops by creating an object and then looping the table. This will work having a fixed table with 2 columns.

stackoverfloweth · Answer 2 · 2017-03-16T17:46:28.300

0

if you can use jQuery try this (not sure how to translate to pure js)

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/

edited Mar 16 '17 at 17:46

answered Mar 16 '17 at 17:38

stackoverfloweth

6,669
5
38
69

Deep 3015 · Answer 3 · 2017-03-16T18:34:36.370

Javascript way

use createElement to create tr and td and appendChild td to tr and finally tr to table

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>

score -1 · Answer 4 · edited May 23 '17 at 12:25

-1

you can iterate the array using for loop and access the table element to override it. Writing into table cell is given in this link : 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]

    }

Combining these two logic will be your solution.

edited May 23 '17 at 12:25

Community

1
1

answered Mar 16 '17 at 17:41

kromastorm

164
3
14

Replacing Values on DOM with Values of an Array

4 Answers4