How to take the value of each TD inside each TR dynamically using jQuery?

Question

I have the following sample HTML:

<tr>
    <td>Futebol</td>
    <td>Campo</td>
</tr>
<tr>
    <td>Volei</td>
    <td>Quadra</td>
</tr>
<tr>
    <td>Tenis</td>
    <td>Saibro</td>
    <td>Campo</td>
</tr>
<tr>
    <td>Natação</td>
    <td>Piscina</td>
</tr>
<tr>
    <td>Ciclismo</td>
    <td>Rua</td>
</tr>

I would need to go through the tr taking the value of each td and have a json sort of like this:

"esportes":[
{
    "esporte":"Futebol",
    "ambiente":"Campo"
},
{
    "esporte":"Volei",
    "ambiente":"Quadra"
},
{
    "esporte":"Tenis",
    "ambiente":"Saibro",
    "ambiente":"Campo"
},
{
    "esporte":"Ciclimo",
    "ambiente":"Rua"
}]

How could I do that to jQuery? I did just that for now but do not know how to continue from here (if I am in the way). Turning to JSON is not quite the problem, the biggest problem would be to take the values in the right way, each sport with its use environment:

$("#tableEsportes > tbody > tr").each(function(){ 
    console.log($(this).text());
});

Answer 1

First of all, JSON cannot have repeated keys:

"ambiente":"Saibro",
"ambiente":"Campo"

I suggest this structure:

[
    {
        "esporte":"Futebol",
        "ambiente": ["Campo"]
    },
    {
        "esporte":"Volei",
        "ambiente": ["Quadra"]
    },
    {
        "esporte":"Tenis",
        "ambiente": ["Saibro", "Campo" ]
    },
    {
        "esporte":"Ciclismo",
        "ambiente": ["Rua"]
    }
]

Then you can use the seletore :first-child to catch only the first <td> son of <tr> and the selector :not(:first-child) to pick up the other elements that will be the local:

$(function () {
    var esportesJson = { "esportes": [] };

    $("#tableEsportes tr").each(function () {
        var esporte = $("td:first-child", this);
        var ambientes = [];
        
        $("td:not(:first-child)", this).each(function () {
            ambientes.push($(this).text());
        });
        
        esportesJson.esportes.push({
            "esporte": esporte.text(),
            "ambiente": ambientes
        });
    });

    console.log(esportesJson);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tableEsportes">
<tr>
    <td>Futebol</td>
    <td>Campo</td>
</tr>
<tr>
    <td>Volei</td>
    <td>Quadra</td>
</tr>
<tr>
    <td>Tenis</td>
    <td>Saibro</td>
    <td>Campo</td>
</tr>
<tr>
    <td>Natação</td>
    <td>Piscina</td>
</tr>
<tr>
    <td>Ciclismo</td>
    <td>Rua</td>
</tr>
</table>

Answer 2

To william’s response da is very good, but another way to be doing using pure Javascript:

var arrayTr = document.body.querySelectorAll('#tableEsportes > tbody > tr');
var array = [];

for (let i = 0, j = arrayTr.length; i < j; i++) {
    let obj = {};
    let ambientes = [];
    let tr = [];

    tr = arrayTr[i];
    obj.esporte = tr.children[0].textContent;

    for (let x = 1, y = tr.children.length; x < y; x++) {
        ambientes.push(tr.children[x].textContent);
    }

    obj.ambiente = ambientes;
    array.push(obj);
}

console.log(JSON.stringify(array));

<table id="tableEsportes"> 
<tr>
    <td>Futebol</td>
    <td>Campo</td>
</tr>
<tr>
    <td>Volei</td>
    <td>Quadra</td>
</tr>
<tr>
    <td>Tenis</td>
    <td>Saibro</td>
    <td>Campo</td>
</tr>
<tr>
    <td>Natação</td>
    <td>Piscina</td>
</tr>
<tr>
    <td>Ciclismo</td>
    <td>Rua</td>
</tr>
</table>

Explaining

• Return all lines with document.querySelectorAll
• Deducing that the first column will always be the sport, the next ones should be the environment so use another to traverse the rest of the columns.
• Use JSON.stringify to transform your array in a string in format JSON.

Answer 3

You can do this: create an array and add the elements to it and then serialize:

var obj = {
esportes: []
};
$("#tableEsportes > tbody > tr").each(function() {
var linha = {
    esporte: $(this).find('td').eq(0).text(),
    ambiente: $(this).find('td').eq(1).text()
}
obj.esportes.push(linha);
});

console.log(JSON.stringify(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableEsportes">

<tr>
    <td>Futebol</td>
    <td>Campo</td>
</tr>
<tr>
    <td>Volei</td>
    <td>Quadra</td>
</tr>
<tr>
    <td>Tenis</td>
    <td>Saibro</td>
    <td>Campo</td>
</tr>
<tr>
    <td>Natação</td>
    <td>Piscina</td>
</tr>
<tr>
    <td>Ciclismo</td>
    <td>Rua</td>
</tr>
</table>