Không thể push dữ liệu từ html vào object với jquery

#1

sau khi người dùng click vào checkbox thì sẽ lưu vào resultObject.
nhưng em push nó vào mà ko được

var resultObject = {
	'testId':"",
	'question':[
	       ]}

function displayQuestion(surveyObj){  
if(!(surveyObj && surveyObj.listQuestion.length > 0)){
	return;
}
var htmlArr = [];
htmlArr.push('<div id="survey-id" style="display:none">'+surveyObj.testId+'</div>')
htmlArr.push('<div id="survey-name"><h2>'+surveyObj.name+'</h2></div>');
htmlArr.push('<div>'+surveyObj.description+'</div>');

resultObject.testId.push({'testId':surveyObj.testId});
console.log(resultObject.testId);
surveyObj.listQuestion.forEach(question=>{
	htmlArr.push('<div id="'+question.questionId+'" class="question">'); 
	htmlArr.push('<h3>'+question.content+'</h3>');
	htmlArr.push('<div class="answer-list">');
	question.listAnswer.forEach(answer=>{
		htmlArr.push('<div class="answer">');
		htmlArr.push('<input type="checkbox" class="answer-input" id="answer-'+answer.answerId+'" value="'+answer.answerId+'">');
		htmlArr.push('<label for="answer-'+answer.answerId+'">'+answer.content+'</label>')
		htmlArr.push('</div>');
	});
	htmlArr.push('</div>');
	htmlArr.push('</div>');
	})
	
htmlArr.push('<button class="btn btn-success btn-next" type="button">Hoàn thành</button>');

jQuery('#survey').append(htmlArr.join('\n'));

jQuery('#survey').find('.question .btn-next').click(function(){
	var questionBox = jQuery(this).closest('.question');
	alert(jQuery(questionBox).find('h3').text());
	
	var resultArr = [];
	
	jQuery(questionBox).find('.answer-input:checked').each(function(){
		
		resultArr.push(jQuery(this).val());
	})
	var resultQuestion=[];
	
	alert(resultArr);
});

}

giao diện để mn dễ hình dung
image

#2

.btn-next nằm ngoài .question mà. Truy vấn như vậy thì nó có tìm thấy thẻ button đâu mà gán sự kiện.
Thế này thôi:

$('#survey').find('.btn-next')
// hay
$('#survey .btn-next')
1 Like
#3

em định làm là khi họ click vào câu trả lời thì e sẽ add nó vào resultObject…
chứ e chưa nói đến chỗ button

1 Like
#4

Theo khai báo thì resultObject.testId là chuỗi, không có phương thức push(). Có thể có lỗi xảy ra tại đây, trừ khi phương thức này đã được định nghĩa nguyên mẫu.

Để thêm vào mỗi lần người dùng chọn thì bạn bắt sự kiện input hoặc change trên mỗi thẻ input mà bạn gắn câu trả lời.
Có nhiều hướng tiếp cận, nhưng dựa trên mã gốc của bạn mà thay đổi chút ít.
Thực hiện ở 2 cái forEach() đấy.

  • Tạo 1 hàm answer(questionId, answerId) chẳng hạn. Trong hàm sẽ gán giá trị của câu hỏi kèm trả lời vào resultObject.
  • Ở mỗi thẻ input sẽ gán sự kiện gọi hàm này.
'<input type="..." class="..." onchange="answer('+question.questionId+','+ answer.answerId+')" />'

Trong hàm có thể chỉ đơn giản như vầy:

function answer(q,a){
    resultObject.questions.push({questionId:q, answerId: a});
}

Nhưng mình lại thích dùng cách này:

resultObject={
   testId:"",
// Đối tượng, không phải mảng, mà mảng cũng được. Javascript "thoáng" lắm =)).
   questions:{}
}
// ...
function answer(q,a){
    resultObject.questions[q] = a; // Ở đây.
}
// Kết quả sẽ có dạng:
resultObject={
   testId:"",
   questions:{
        "123":1,
        "456":3,
        "789":4
    }
}

Cách này sẽ tránh trường hợp người dùng thay đổi câu trả lời, hoặc nhấn nhiều lần vào câu trả lời. Chưa có sẽ thêm, có rồi sẽ sửa.
Dùng push() thì mỗi lần nhấn nó sẽ đẩy thêm vào mảng. Làm mảng dày thêm vô nghĩa.
Tất nhiên, cũng có thể viết thêm vài đoạn mã để tránh trường hợp này với cách dùng push().

2 Likes
#5

cách của a thì lại chỉ đúng với lần click đầu. khi click sang câu thứ 2 nó ko add được

#6

Sao lại không được nhỉ? :roll_eyes:
Có lỗi nào xảy ra không?
Có thể do sự kiện, tùy trường hợp mà bạn dùng input, change hoặc click.

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?