Xử lý các mảng đầu vào trong biểu mẫu Express?

Question

Hãy nói rằng tôi phải chỉnh sửa một loạt các đối tượng cùng loại trên cùng một trang:

//-jade 
form(action='', method='POST') 
    for each message_id in messages_ids 
     input(type='text', name='message', id='#{message_id}') 
     input(type='text', name='author', id='#{message_id}') 
    input(type='submit', value='Send') 

Tôi biết tôi wont có thể xử lý hình thức như trên backend 'nguyên nhân của id - nó sẽ không được gửi để phụ trợ. Tuy nhiên, có cách nào để làm điều đó không? Tôi muốn nhận được nội dung như thế này trên chương trình phụ trợ:

//js 
for (var i = 0; i <= req.body.message.length; i++) { 
    console.log (
     'ObjectID: ' + req.body.message[i].id, //-? null, just to show what I'm trying to get 
     'Message: ' + req.body.message[i], 
     'Author: ' + req.body.author[i] 
    ); 
} 

Đó là mã giả (nó không hoạt động). Vì vậy, bất kỳ ý tưởng?

P.S. Tôi nhận được như thế nào để làm điều này mà không cần AJAX

Answer 1

Đối bodyParser.urlencoded, nếu bạn thiết lập các tùy chọn extended để true, thuộc tính tên của định dạng property[nestedProperty] sẽ được giải thích bởi các bodyParser middleware như:

{ property: nestedPropert: $value } 

Chỉ cần chắc chắn để khởi tạo phần mềm trung gian như vậy:

app.use(bodyParser.urlencoded({ extended: true }); 

Sau đó, thay đổi tuyên bố biểu mẫu ở trên để có thuộc tính thư là đối tượng thay vì chuỗi giá trị, như vậy:

form(action='', method='POST') 

    - for (var i = 0; i < messages_ids.length; i++) 
     - var message_id = messages_ids[i] 
     //- so we're treating each index like a property of `message` 
     input(type='text', name='messages[#{i}][message]') 
     input(type='text', name='messages[{#{i}}][author]') 
     input(type='hidden', name='messages[#{i}][id]', value='#{message_id}') 

    input(type='submit', value='Send') 

Và sau đó, ở phía máy chủ, request.body.messages sẽ là một đối tượng, trông giống như:

{ 
    "messages": { 
    "1": { 
     "message": $message1, 
     "author": $author1, 
     "id": $id1 
    }, 
    "2": { 
     "message": $message2, 
     "author": $author2, 
     "id": $id2 
    } /* , ... */ 
    } 
} 

Và sau đó, bạn có thể dễ dàng chuyển đổi request.body.messages vào một mảng:

var messages = Array.prototype.slice.call(request.body.messages); 

Và bây giờ, bạn sẽ có thể truy cập từng yếu tố như vậy (lưu ý: Tôi thích phong cách chức năng hơn, nhưng tôi sẽ giữ cho nó phù hợp với bạn):

for (var i = 0; i < messages.length; i++) { 
    console.log({ 
    'ObjectId' + messages[i].id, 
    'Message' + messages[i].message, 
    'Author' + messages[i].author 
    }); 
} 

PS: nếu bạn đang băn khoăn về một phong cách chức năng, sau đó ở đây là:

messages.forEach(function (message) { 
    console.log(
    'ObjectId' + message.id, 
    'Message' + message.message, 
    'Author' + messages.author 
); 
}); 

Sửa: đặc biệt nhờ vào @eye_mew để chỉ ra rằng chúng ta cần phải thiết lập extended để true.