make multidimensional array jquery

Question

<tr class="" style="display: table-row;"> 
    <td id="" name="">id</td> 
    <td id="" name="">name</td> 
    <td id="">hobbies</td> 
    <td id="">age</td> 
    <td id="">gender</td> 
</tr> 
<tr class="" style="display: table-row;"> 
    <td id="" name="">015-08-0003-000-04</td> 
    <td id="" name="">john</td> 
    <td id=""><span id="sports" class="" title="">basketball</span>,<span id="music" class="" title="">guitar</span></td> 
    <td id="">21</td> 
    <td id="">male</td> 
    <td><a href="#" class="af_arpta_propertybuilding_addlandref">Add</a></td> 
</tr> 

這是我的個人信息表（動態表）。 我想從這些數據中創建一個數組。 我創建了一個單一的陣列出這像這樣

var $rows2 = $('#tableid').find("tr:not(:eq(0))"); 
$rows2.each(function() { 
    var $tds = $(this).find('td'); 
    var id = $tds.eq(0).text(); 
    var name = $tds.eq(1).text(); 
    var hoobies = $tds.eq(2).text(); 
    var age = $tds.eq(3).text(); 
    var gender = $tds.eq(4).text(); 

    perinfo.push({ 
     id: id, 
     name: name, 
     age: age, 
     gender: gender 

    }); 

我的問題是如何讓我想創建後性別命名的愛好另一個項目的愛好，但這次將是多維覆蓋體育和音樂類別。任何建議從這個創建該數組。

我希望它看起來像

[{ 
    "id": "015-08-0003-000-04", 
    "name": "john", 
    "age": "21", 
    "gender": "male" 
    "hobbies": [{ 
     "sport": "basketball", 
     "music": "guitar" 
    }] 
}] 

Fiddle

Answer 1

你需要自己創建的愛好數組，text()將返回文本內容的連接字符串。

您可以使用.map()從給定的一組元素中創建一個對象數組。此外，從給定的標記中，我假設可以有多個tr元素，在這種情況下，您不應該使用id作爲業餘愛好span元素，因爲元素的ID必須是唯一的。

var perinfo = $('#tableid tr').slice(1).map(function() { 
 
    var $tds = $(this).find('td'); 
 
    var id = $tds.eq(0).text(); 
 
    var name = $tds.eq(1).text(); 
 
    var hoobies = $tds.eq(2).find('span').map(function() { 
 
     var obj = {}; 
 
     obj[$(this).data('id')] = $(this).text(); 
 
     return obj; 
 
    }).get(); 
 
    var age = $tds.eq(3).text(); 
 
    var gender = $tds.eq(4).text(); 
 

 
    return { 
 
     id: id, 
 
     name: name, 
 
     age: age, 
 
     gender: gender, 
 
     hoobies: hoobies 
 
    }; 
 
}).get(); 
 
snippet.log(JSON.stringify(perinfo)); 
 
console.log(perinfo)

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id='tableid'> 
 
    <tr class="" style="display: table-row;"> 
 
     <td id="" name="">id</td> 
 
     <td id="" name="">name</td> 
 
     <td id="">hobbies</td> 
 
     <td id="">age</td> 
 
     <td id="">gender</td> 
 
    </tr> 
 
    <tr class="" style="display: table-row;"> 
 
     <td id="" name="">015-08-0003-000-04</td> 
 
     <td id="" name="">john</td> 
 
     <td id=""> 
 
      <span data-id="sports" class="" title="">basketball</span>, 
 
      <span data-id="music" class="" title="">guitar</span> 
 
     </td> 
 
     <td id="">21</td> 
 
     <td id="">male</td> 
 
    </tr> 
 
</table>