For loop inside for loop not working properly repeating same values multiple times Javascript

Question

I'm wanting every <tbody> tag will be gone as object index like first <tbody>->1 and second <tbody>-> 2 then inside the <tbody> every <tr> will be another object and that will be store into the <tbody> object and last the last part every <td> should have object key ("eiin", "name") inside the <tr> object

I'm trying using for loop multiple times but the console.log showing me okay but first object repeated 2 times.

Html

<section class="institute_list">
    <table class="table" border="1">
        <thead>
            <tr>
                <th scope="col">EIIN</th>
                <th scope="col">Institute</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>000000</td>
                <td>Name</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>111111</td>
                <td>Name 2</td>
            </tr>
        </tbody>
    </table>
</section>

Javascript & jQuery

<script>
    var rows = '', the_row='', the_xrow={}, tr_values={}, xtd_obj={};
    tbodys = ($(".institute_list .table tbody").length);

    for( var x=0; tbodys > x; x++)  {
        rows = $('.institute_list .table tbody:nth-child('+(x+1)+') tr').length;
        the_row = '.institute_list .table tbody:nth-child('+(x+1)+') tr:nth-child(';

        for( var i=1; rows >= i; i++ ){
            tr_values = {
                'eiin'   : $(the_row+i+') td:first-child').text(),
                'name'   : $(the_row+i+') td:nth-child(2)').text()
            };

            the_xrow[i] = tr_values;
        }  
        xtd_obj[x] = the_xrow;
    }
    console.log(xtd_obj);
</script>

and i'm getting this output in console here

This is wrong in so many ways. I don't have the time right now to write a full answer, but just as hints: a) You have the second <tbody> inside the first because you never close it with </tbody> - b) You use nth-child where it doesn't make sense, for example the first <tbody> is actually the second child of the <table> because the <thead> is the first child, you should better just put all the relevant elements into a variable and then call .eq(0), .eq(1) etc. on it (or even simpler, use jQuery's .each to iterate over all selected elements instead of a for loop) — CherryDT
– CherryDT, Commented Apr 13, 2020 at 19:42
But the most important issue here is this: You have only one object the_xrow object that you assign to all bodies over and over again! — CherryDT
– CherryDT, Commented Apr 13, 2020 at 19:43
That's why you see duplicate data. You should create a new object with = {} in each loop. (Object values are assigned by reference, not by value!) — CherryDT
– CherryDT, Commented Apr 13, 2020 at 19:44
Thanks for your clarify. It's solved. The fixed code has given another answer. — Naiem
– Naiem, Commented Apr 13, 2020 at 20:22

Abubakar Wazih Tushar · Accepted Answer · 2020-04-14 00:22:08Z

1

You may try the code below. You can separate every <tbody>,<tr>,<td> tag as a loop then make them a array.

var target = $(".institute_list > table");

var output = [];
$(target).find("tbody").each(function(i){
    output[i] = {};
    $(this).children().each(function(j){
        output[i][j] = {};
         $(this).children().each(function(k, td){
         	if ( k == 0 ) {
         		output[i][j]["eiin"] = $(td).text();
         	} else if ( k == 1 ) {
         		output[i][j]["name"] = $(td).text();
         	} else {
         		output[i][j][k] = $(td).text();
         	}
        });
    });
});
console.log(output);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="institute_list">
    <table class="table" border="1">
        <thead>
            <tr>
                <th scope="col">EIIN</th>
                <th scope="col">Institute</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>000000</td>
                <td>Name</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>111111</td>
                <td>Name 2</td>
            </tr>
        </tbody>
    </table>
</section>

edited Apr 14, 2020 at 0:22

answered Apr 13, 2020 at 23:59

Abubakar Wazih Tushar

12411 bronze badges

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

1 Comment

Naiem Over a year ago

Thank you so much, it's working exactly that I want

RenegadeRanger · Accepted Answer · 2020-04-13 19:57:03Z

1

First, you need a closing </tbody> tag around the first element. Second I think you might be running into a scoping problem. You are defining the_xrow and tr_values outside of the for loops instead of inside of the for loops.

<script>
    var xtd_obj={};
    var tbodys = ($(".institute_list .table tbody").length);

    for( var x=1; tbodys >= x; x++)  {
        var current_row = '.institute_list .table tbody:nth-child('+x+') tr';
        var rows = $(current_row).length;
        var the_row = current_row + ':nth-child(';
        var the_xrow = {};
        for( var i=1; rows >= i; i++ ){
            the_xrow[i] = {
                'eiin'   : $(the_row+i+') td:first-child').text(),
                'name'   : $(the_row+i+') td:nth-child(2)').text()
            };
        }  
        xtd_obj[x] = the_xrow;
    }
    console.log(xtd_obj);
</script>

edited Apr 13, 2020 at 19:57

answered Apr 13, 2020 at 19:28

RenegadeRanger

946 bronze badges

3 Comments

Naiem Over a year ago

Yes, I exactly meant that. That's are defined variables and objects

RenegadeRanger Over a year ago

What do you want your output to look like?

Naiem Over a year ago

sorry! there will be tr_values={} instead of get_row_values={}

Naiem · Accepted Answer · 2020-04-13 20:12:06Z

It's working for me

<script>
    var rows = '', the_row='', xtd_obj={};
    var tbodys = ($(".institute_list .table tbody").length)+1;

    for( var x=1; tbodys > x; x++)  {
        rows = $('.institute_list .table tbody:nth-child('+(x+1)+') tr').length;
        the_row = '.institute_list .table tbody:nth-child('+(x+1)+') tr:nth-child(';
        var the_xrow = {};
        for( var i=0; rows > i; i++ ){
            var tr_values = {
                'eiin'   : $(the_row+i+1+') td:first-child').text(),
                'name'   : $(the_row+i+1+') td:nth-child(2)').text()
            };

            the_xrow[i] = tr_values;
        }  
        xtd_obj[x] = the_xrow;
    }
    console.log(xtd_obj);
</script>

Here's the screenshot

Collectives™ on Stack Overflow

For loop inside for loop not working properly repeating same values multiple times Javascript

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related