遍历表并将值存储为键/值对

Question

I have an html table like

  <table>
    <tbody><tr><th>Course Name</th>
    <th>Course ID</th>
    <th>Value</th>
    </tr><tr>
<td>Course A</td>  
<td class="asset-id">1616781</td>  
<td class="asset-val">1306886</td>
</tr>

<tr>
<td>Course B</td>  
<td class="asset-id">723507</td>  
<td class="asset-val">1306886</td>
</tr>

<tr>
<td>Course C</td>  
<td class="asset-id">723503</td>  
<td class="asset-val">1306886</td>
</tr>

I want to traverse this table and create an Array of objects like

[{
    "id": 1616781,
    "value": 1306886
}, {
    "id": 723507,
    "value": 1306886
}, {
    "id": 723503,
    "value": 1306886
}]

I have tried something like this so far, but its not working ...

 var myArray = [];
 $('.asset-id, .asset-val').each(function(i, obj) {                
            var tmpObj = {};
            var asset_key='';
            var asset_text='';

            tmpObj[asset_key] = $(".asset-id", this).text();
            tmpObj[asset_text] = $(".asset-val", this).text();
            myArray.push(tmpObj)
            console.log(myArray);

        });

Any help is very appreciated. Thanks

Answer 1

You have quite a few problems with your code:

1. myArray is defined inside the loop, so you're always instantiating it with an empty array.

2. The selectors don't work because you're looping over each element.

3. Both asset_key and asset_text are empty strings.

Te following should work for you:

 var arr = [ ]; $('.asset-id').each(function() { arr.push({ 'id': $(this).text(), 'value': $(this).siblings(".asset-val").text() }); }); console.log( arr ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th>Course Name</th> <th>Course ID</th> <th>Value</th> </tr> <tr> <td>Course A</td> <td class="asset-id">1616781</td> <td class="asset-val">1306886</td> </tr> <tr> <td>Course B</td> <td class="asset-id">723507</td> <td class="asset-val">1306886</td> </tr> <tr> <td>Course C</td> <td class="asset-id">723503</td> <td class="asset-val">1306886</td> </tr> </table> 

Answer 2

Instead of looping over the rows and finding each td, you can just select all the elements and loop over that.

 var ids = $('.asset-id') var vals = $('.asset-val') var result = []; ids.each(function(i, v){ result.push({ id: +v.textContent, value: +vals.eq(i).text()}) // result.push({ id: +ids.eq(i).text(), value: +vals.eq(i).text()}) }) console.log(result) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <th>Course Name</th> <th>Course ID</th> <th>Value</th> </tr> <tr> <td>Course A</td> <td class="asset-id">1616781</td> <td class="asset-val">1306886</td> </tr> <tr> <td>Course B</td> <td class="asset-id">723507</td> <td class="asset-val">1306886</td> </tr> <tr> <td>Course C</td> <td class="asset-id">723503</td> <td class="asset-val">1306886</td> </tr> </tbody> </table>