Làm thế nào để xây dựng một đối tượng json với một vòng lặp?

Question

Tôi đang cố gắng lặp qua một số mục và tạo đối tượng json. Mỗi vòng lặp phải là một mục mới trên đối tượng, nhưng tôi đang gặp phải một số vấn đề. Có vẻ như chỉ có một tập hợp các mục được thêm vào, thay vì nhiều mục.

Đây là mã của tôi:

jsonObj = {} 
rows.each(function (index) { 
    jsonObj["id"] = $this.find('.elementOne').val(); 
    jsonObj["name"] = $this.find('.elementTwo').text(); 

}); 

Đây là những gì json của tôi trông giống như:

{ 
    id: "3" 
    name: "Stuff" 
}, 

Dưới đây là những gì tôi đang cố gắng để làm:

{ 
    id: "1" 
    name: "Stuff" 
}, 
{ 
    id: "2" 
    name: "Stuff" 
}, 
{ 
    id: "3" 
    name: "Stuff" 
} 

Answer 1

Không có JSON đây. Xin đừng nhầm lẫn:

• đối tượng A JavaScript (một cấu trúc dữ liệu) đối tượng
• Một Javascript đen (mã để tạo ra một cấu trúc dữ liệu như vậy)
• JSON (một định dạng dữ liệu dựa trên một tập hợp con của đối tượng ký hiệu chữ)

Nếu bạn muốn danh sách thứ tự các đối tượng (hoặc bất kỳ loại cấu trúc dữ liệu JavaScript nào khác) thì hãy sử dụng một mảng. Mảng có phương thức push.

var myData = []; 
rows.each(function (index) { 
    var obj = { 
     id: $this.find('.elementOne').val(), 
     name: $this.find('.elementTwo').text() 
    }; 
    myData.push(obj); 
}); 

Answer 2

var jsonObj = []; 
rows.each(function(index) { 
    jsonObj.push({ 
     id: $this.find('.elementOne').val(), 
     name: $this.find('.elementTwo').text() 
    }); 
}); 

Answer 3

Bạn ghi đè lên đối tượng thay vì thêm nó một giá trị mới khẩu phần ăn.

Sửa code sử dụng một mảng:

jsonObj = []; 
rows.each(function(index) { 
    jsonObj.push({ 
     'id': $this.find('.elementOne').val(), 
     'name': $this.find('.elementTwo').text() 
    }); 
});​ 

Answer 4

Điều này là do bạn chỉ đơn thuần ghi đè lên các tính chất tương tự của đối tượng của bạn, id và name, mỗi lần. Bạn cần phải tạo một đối tượng con cho mỗi đối tượng, sau đó đẩy nó vào đối tượng chính (mà tôi đã chuyển đổi thành mảng, vì nó không liên kết).

var jsonObj = [] 
rows.each(function (index) { 
    var temp_obj = {}; 
    temp_obj["id"] = $this.find('.elementOne').val(); 
    temp_obj["name"] = $this.find('.elementTwo').text(); 
    jsonObj.push(temp_obj); 
}); 

[EDIT] - như chương trình trả lời Đánh dấu Eirich, những temp_obj là không cần thiết - bạn có thể đẩy một đối tượng vô danh thay vào đó, nhưng tôi định nghĩa temp_obj chỉ để làm cho nó tinh thể rõ ràng những gì đang xảy ra.

Cũng đọc lại điểm rất tốt của Quentin: sự nhầm lẫn chung giữa các đối tượng JavaScript và JSON.

Answer 5

Điều bạn muốn là một mảng đối tượng. Khi bạn cố gắng viết cùng một thuộc tính trên cùng một đối tượng nhiều lần, nó sẽ bị ghi đè, đó là lý do tại sao bạn thấy id và name chứa các giá trị cho lần lặp cuối cùng của vòng lặp.

Mặc dù bạn đã không được gắn thẻ câu hỏi với jQuery, nó trông giống như jQuery, vì vậy đây là một giải pháp:

Tôi đã lấy sự tự do để thay đổi $this để this vì $this dường như được đề cập đến cùng đối tượng trong mỗi lần lặp lại, hiện giờ là những gì bạn có thể muốn (methinks)

var myArray = rows.map(function() { 
    return { 
     id: $(this).find('.elementOne').val(), 
     name: $(this).find('.elementTwo').text() 
    }; 
}); 

Answer 6

Bạn có thể làm như thế này với jquery. Hàm sẽ mong đợi các phần tử biểu mẫu của kiểu đầu vào. Nó sẽ lặp trên mẫu thông qua sẽ thu thập từng tên đầu vào và giá trị và nó sẽ tạo ra một đối tượng JSON như

exmple:

HTML

<form action="" method="post" id="myForm"> 
    <input type="text" name="field1" value="I a value of field 1"/> 
    <input type="text" name="field2" value="I a value of field 2"/> 
</form> 

Javascript

function buildObject(form) { 
      var jsonObject = [], 
       tempObj = {}; 
      $(form).find("input:not(input[type='submit'])").each(function() { 
       tempObj[$(this).attr("name")] = $(this).val(); 
      }); 

      jsonObject.push(tempObj); 

      return jsonObject[0]; 
    } 
    buildObject($("#myForm")); 
    //Will produce 

    jsonObj = { 
     field1 : "I a value of field 1", 
     field2 : "I am value of field 2"  
    }