Question

我想制作这个

arr = [{
    "name": "john",
    "tel": 123
}, {
    "name": "marry",
    "tel": 999
}];

但我在下面的代码中得到的只是单个数组。

var arr = [{}];

$('button').click(function () {
    $.each($('.row'), function () {
        arr.name = $(this).find('li.name input').val();
        arr.tell = $(this).find('li.tel input').val();
    });

    console.log(arr);
});

它出了什么问题？ http://jsfiddle.net/1LLwh15f/1/

Answer 1

您在代码中所做的一切都是在数组实例上反复分配相同的两个属性。您没有做任何事情要么在数组中创建您想要的对象，要么在阵列中添加任何条目。

要向数组添加内容，您可以使用Array#push。要创建对象，您可以使用object initializer。

$.each($('.row'), function () {
    arr.push({
        name: $(this).find('li.name input').val(),
        tell: $(this).find('li.tel input').val()
    });
});

或者，您可以使用jQuery＆＃39; map函数：

arr = $('.row').map(function() {
    return {
        name: $(this).find('li.name input').val(),
        tell: $(this).find('li.tel input').val()
    };
}).get(); // <== Note the .get() at the end

旁注：您的初始化：

var arr = [{}];

...创建一个包含一个空白对象的数组。您不需要空白对象，只需= []即可创建数组。

Answer 2

你不是在推动obj只是你一次又一次地压倒一切，如果你想要欲望输出那么做

var arr = [];

$('button').click(function(){
   $.each($('.row'), function(){
       var obj={};
    obj.name = $(this).find('li.name input').val();
    obj.tell = $(this).find('li.tel input').val();
       arr.push(obj)
});

console.log(arr);
});

<强> DEMO

Answer 3

您需要push进入数组。这将在最后添加数组中的新对象。

var arr = [];
// Remove {} from array declaration

$('button').click(function () {
    $('.row').each(function () {
        // push object inside array
        arr.push({
            name: $(this).find('li.name input').val(),
            tell: $(this).find('li.tel input').val()
        });
    });

    console.log(arr);
});

演示：http://jsfiddle.net/tusharj/1LLwh15f/2/

Answer 4

您未正确地向阵列添加数据。

请改为尝试：

＆＃13;

var arr = []; // Don't add the empty object there.

$('button').click(function () {
    $.each($('.row'), function () {
        arr.push({
            name: $(this).find('li.name input').val(),
            tell: $(this).find('li.tel input').val()
        }); // Add a new element to the array, containing the current row's data.
    });

    console.log(arr);
    alert(JSON.stringify(arr));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <li class="name"><input value="" placeholder="name" /></li>
    <li class="tel"><input value="" placeholder="tel" /></li>
</div>
<br>
<div class="row">
    <li class="name"><input value="" placeholder="name" /></li>
    <li class="tel"><input value="" placeholder="tel" /></li>
</div>
<br>
<button>submit</button>

＆＃13;

Array.prototype.push实际上在数组的末尾添加了一个新元素，而不是你正在做的事情，即向数组对象本身添加name和tell属性。

Answer 5

您需要在数组中推送值，而不是将其用作对象

var temp = {
    name: $(this).find('li.name input').val(),
    temp: $(this).find('li.tel input').val()
}

arr.push(temp);

http://jsfiddle.net/yvzukj47/

构建javascript对象数组失败

5 个答案: