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

JQuery can handle multidimensional array. Look here: stackoverflow.com/questions/17075082/… — Shultc
– Shultc, Commented Aug 28, 2015 at 2:50

Arun P Johny · Accepted Answer · 2015-08-28 02:49:42Z

2

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>

answered Aug 28, 2015 at 2:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

12 Comments

Brownman Revival Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

@BrownmanRevival If you want to use a class also then you can also try jsfiddle.net/arunpjohny/nkufLp74/4

Arun P Johny Over a year ago

@BrownmanRevival Yes, it is part of the data api - also developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

|

Collectives™ on Stack Overflow

make multidimensional array jquery

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related