CODEWITHSUNDEEP
javascriptjqueryeach
ozil
ozil

Reputation: 7117

jquery .each loop odd behaviour

Hi I have the following code
html 

<table id="tbPermission">
  <tr>
    <th>User ID</th>
    <th>User Name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Test1</td>
  </tr>
<tr>
    <td>2</td>
    <td>Test2</td>
  </tr>
<tr>
    <td>3</td>
    <td>Test3</td>
  </tr>
</table>

script 

var trArray = [];
var tdArray = [];
var reruiredObj = {"UserID":null,
                   "UserName":null
                  };
var first;
var second;
$('#tbPermission tr').each(function () {

    $(this).find('td').each(function (index) {
        //alert(index+'-'+ $(this).html());
        //alert(index);
        if(index == 0){
            first = $(this).html();
        }
        else{
            second = $(this).html();

        }
        //alert(JSON.stringify(reruiredObj));
    });
    alert(first+'-'+second)
    reruiredObj['UserID'] = first;
    reruiredObj['UserName'] = second;
    trArray.push(reruiredObj);


});
alert(JSON.stringify(trArray));

Demo Here
My question why first and second in undefined in first alert, and why it is
[{"UserID":"3","UserName":"Test3"},{"UserID":"3","UserName":"Test3"},{"UserID":"3","UserName":"Test3"},{"UserID":"3","UserName":"Test3"}]
my desired output is
[{"UserID":"1","UserName":"Test1"},{"UserID":"2","UserName":"Test2"},{"UserID":"3","UserName":"Test3"}]

Upvotes: 0

Views: 137

Answers (3)

Anto S
Anto S

Reputation: 2449

Below works fine for me.

Since your first tr doesnt have td it gives undefined error. Try below one

<table id="tbPermission">
 <thead>
   <tr>
    <th>User ID</th>
    <th>User Name</th>
  </tr>
 </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Test1</td>
  </tr>
<tr>
    <td>2</td>
    <td>Test2</td>
  </tr>
<tr>
    <td>3</td>
    <td>Test3</td>
  </tr>
</tbody>
</table> 




    <script>
$(function () {
    var trArray = [];
var tdArray = [];
var reruiredObj = {"UserID":null,
                   "UserName":null
                  };


jsonObj = [];                 
var first;
var second;
$('#tbPermission tbody tr').each(function () {

    $(this).find('td').each(function (index) {
        //alert(index+'-'+ $(this).html());
        //alert(index);
        if(index == 0){
            first = $(this).html();
        }
        else{
            second = $(this).html();

        }
        //alert(JSON.stringify(reruiredObj));
    });
    alert(first+'-'+second)
    item = {}
    item ["UserID"] = first;
    item ["UserName"] = second;
    jsonObj.push(item);


});
console.log(jsonObj);
});
  </script>

alert jsonObj. This gives the required result.

Upvotes: 0

j08691
j08691

Reputation: 207891

The scope of your reruiredObj object is incorrect which is why you get the same object three times. Try this instead:

var trArray = [];
var tdArray = [];
var first;
var second;
$('#tbPermission tr:gt(0)').each(function () {
    var reruiredObj = {
        "UserID": null,
            "UserName": null
    };
    first = $(this).find('td').eq(0).html();
    second = $(this).find('td').eq(1).html();
    reruiredObj['UserID'] = first;
    reruiredObj['UserName'] = second;
    trArray.push(reruiredObj);
});
console.log(JSON.stringify(trArray));

jsFiddle example

And the undefined values come from iterating over the first row which you don't want, and can ignore with tr:gt(0)

Upvotes: 2

kapantzak
kapantzak

Reputation: 11750

The first alert gives undefined because the first row of the table does not contain any td element.

To exclude the first row from the loop:

$('#tbPermission tr').each(function (i) {    
  if (i != 0) {    
    // execute ..
  }
});

As for the array, try this in each loop:

var reruiredObj = { "UserID": first , "UserName":second };

Check the DEMO

Upvotes: 1

Related Questions