Create multidimensional array using map()

Question

Hello experts,
Could you please recommend:

I have two tables:

<tr id='firs_table'>
<td id="team">team1</td><td>45</td>
<td id="team">team2</td><td>47</td>
</tr>
<tr id='second_table'>
<td id="team">team1</td><td id="service">service name1</td><td id="count">count1</td>
<td id="team">team1</td><td id="service">service name2</td><td id="count">count2</td>
<td id="team">team1</td><td id="service">service name3</td><td id="count">count3</td>
<td id="team">team2</td><td id="service">service name1</td><td id="count">count1</td>
<td id="team">team2</td><td id="service">service name2</td><td id="count">count2</td>
</tr>

I need to create dictionary like:

team1: ['service name1','service name2','service name3'], [count1,count2, count3]
team2: ['service name1','service name2'], [count1,count2]

could you please advise algorithm with jquery ? I need that result in order create RGraph graph. Thank you in advance.

I could not provide any working example of jquery code, I could not find a way how to iterate over $("tr#first_table td"#team") value and compare it with $("tr#second_table td"#team"), if values are the same => return array of [[$("tr#second_table td"#service")], [$("tr#second_table td"#count")] ].

I mean, I could not find idea.

Answer 1

This should do what you need

var res = {}
$('table tr').each(function () {
    var cellText = $(this).find('td').map(function (i, el) {
        return $(el).text();
    }).get();
    if (!res[cellText[0]]) {
        res[cellText[0]] = [[],[]];
    }
    res[cellText[0]][0].push(cellText[1]);
    res[cellText[0]][1].push(cellText[2]);    
});

If you have a heading row can use $('table tr:gt(0)')

DEMO