Javascript: loop through array of objects to find key value pair and render them in the table td

Question

Here is the following table code created dynamically and I want to get the last 2 values stored in TD. the last td value is in the form of "key-value-pair". I want to display something like below:

 <tbody>
    {{#items}}
            <tr>
                <td>{{name}}</td>
                <td>{{description}}</td>
                <td id="newval">{{new_value}}</td>
                <td id="oldval">{{old_value}}</td>
           </tr>    
    {{/items}}
 </tbody>

here is the json obtained from the server:

{  
   "result":"OK",
   "items":[  
      {  
         "name":"abc",
         "description":"desc",
         "new_value":{  
            "description":"newvalue"
         },
         "old_value":{  
            "description":"oldvalue "
         }
      },
      {  
         "name":"abc3",
         "description":"desc2",
         "new_value":{  
            "interval":"newvalue2"
         },
         "old_value":{  
            "interval":"oldvalue2 "
         }
      }
   ]
}

here is the js:

  $.each(lists,function(i,items){
          for (var key in items) {
            if(key == 'new_value'){
              for(value in items[key]){
            $("td#newval").html(value + " : " +items[key][value]);
              }
            }
          }
      });

Similarly I'm doing it for the old value, just replacing the "td" id and value. but what is happening is only the first td gets updated with all the values of "new_value" in the array and the remaining td's are rendered blank. I want to display in such a way that it will loop through the array and find the key value pair associated with the "new_value" object and render both values for the respective td's.

<td>description: newvalue</td>
<td>interval: newvalue2</td>

how can i achieve this? Thanks!

@ArunPJohny: Sorry, corrected the table above. its rendered dynamically, so even if i apply class it gets appied to all the td's — user1234
– user1234, Commented Mar 8, 2016 at 3:40

Arun P Johny · Accepted Answer · 2016-03-08 03:49:04Z

1

Since Id of an element must be unique, you should use some other attribute of to group elements.

Here one possible approach is to use a class and a data attribute to specify the property to map to a field like

var data = {
  "result": "OK",
  "items": [{
    "name": "abc",
    "description": "desc",
    "new_value": {
      "description": "newvalue"
    },
    "old_value": {
      "description": "oldvalue "
    }
  }, {
    "name": "abc3",
    "description": "desc2",
    "new_value": {
      "interval": "newvalue2"
    },
    "old_value": {
      "interval": "oldvalue2 "
    }
  }]
};
var trmap = {};
$('table tr').each(function() {
  trmap[$(this).children(':first-child').text().trim()] = this;
});

$.each(data.items, function(i, item) {
  if (trmap[item.name]) {
    var $tr = $(trmap[item.name]);
    $tr.find('.val').text(function() {
      var key = $(this).data('key');
      var arr = [];
      $.each(item[key], function(key, value) {
        arr.push(key + ': ' + value)
      });
      return arr.join('');
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>abc</td>
      <td>desc</td>
      <td class="val" data-key="new_value">key: newvalue</td>
      <td class="val" data-key="old_value">key: oldvalue</td>
    </tr>
    <tr>
      <td>abc3</td>
      <td>desc2</td>
      <td class="val" data-key="new_value">key: newvalue2</td>
      <td class="val" data-key="old_value">key: oldvalue2</td>
    </tr>
  </tbody>
</table>

answered Mar 8, 2016 at 3:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1234 Over a year ago

Thanks for the snippet..well i took care of the remaining fields via the mustache.js..now i tried to add values into the td only for "new_value" and "old_value" object: but it table show up: jsfiddle.net/zPWDJ/14

Collectives™ on Stack Overflow

Javascript: loop through array of objects to find key value pair and render them in the table td

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related