制作多维数组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"
    }]
}]

小提琴

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>