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>

This is my table for getting personal information(dynamic table). I want to create an array out of this data. I created a single array out of this like this

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
 });

My problem is how to get the hobbies i want to create another entry after gender named hobbies but this time it will be multidimensional to cover sports and music category. Any suggestion to create that array out of this one.

I am hoping it would look like

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

Fiddle

• Shultc: JQuery can handle multidimensional array. Look here: stackoverflow.com/questions/17075082/…

Answer 1

You need to create an array of hobbies yourself, text() will return a concatenated string of text content.

You can use .map() to create an array of object from a given set of elements.

Also, from the given markup, I assume that there can be multiple tr elements, in that case you should not use id for the hobby span elements, as ID of an element must be unique.

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>

• Brownman Revival: yeah there will be multiple row yeah i think i will use class for this let me work for a couple of minutes be right back
• Brownman Revival: if i put data-class will it function same like class or do i need to declare each one?havent used data-class or data-id
• Arun P Johny: no... class and data-class are different... you can assign a class for css else you can use a attribute css rule for styling
• Arun P Johny: @BrownmanRevival If you want to use a class also then you can also try jsfiddle.net/arunpjohny/nkufLp74/4
• Arun P Johny: @BrownmanRevival Yes, it is part of the data api - also developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset