Khó khăn khi fetch api

em xin trình bày ý tưởng của em như sau:
Đầu tiên, em fetch api để lấy được giá trị id trong api. Sau khi lấy thành công thì mỗi input sẽ bao gồm id lấy trong api. Sau khi người dùng chọn đáp án và bấm submit thì sẽ repsonse ra một json body có dạng là một object lưu value và id của câu hỏi (thực ra đoạn này em cũng không biết phải diễn tả như nào) được trình bày theo form sau:

answer {
    "id":"value" trong đó id là id của đáp án được chọn và value là value của đáp án đấy
}

Vậy cho em hỏi là làm sao sau khi em fetch được thành công, làm sao em có thể lấy được dữ liệu mà người dùng đã chọn và sau khi submit thì sẽ response ra một object như form em muốn ạ. Em chỉ biết làm phần fetch api ra id, còn lại thì em không biết làm và rất mơ hồ, không biết phải làm như thế nào. Em xin chân thành cảm ơn

<form>

    <h2>Câu 1</h2>
    <input type="radio" value='1' name="c1">
    <label>1</label><br>
    <input type="radio" value='2' name="c1">
    <label>2</label><br>
    <input type="radio" value='3' name="c1">
    <label>3</label><br>
    <input type="radio" value='4' name="c1">
    <label>4</label><br>

    <h2>Câu 2</h2>
    <input type="radio" value='1' name="c2">
    <label>1</label><br>
    <input type="radio" value='2' name="c2">
    <label>2</label><br>
    <input type="radio" value='3' name="c2">
    <label>3</label><br>
    <input type="radio" value='4' name="c2">
    <label>4</label><br>


    <div class="button">
        <button type="submit">Submit</button>
    </div>
</form>
function onResponse(res) {
    return res.json();
}

function data(data) {
    //chuyển data thành object của js
    const a = JSON.stringify(data);
    const b = JSON.parse(a);

    const form = document.querySelectorAll('input');
    //gán id cho mỗi input
    for (let i = 0; i < form.length; i++) {
        form[i].id = b[i].id;
    }
    // lấy value và id của các đáp án được chọn
    function onSubmit() {
        //tạo mảng để thành form "id":"value"
        const na = {}
        const inputWord = document.querySelectorAll("input");
        for (let i = 0; i < inputWord.length; i++) {
            //lấy ra value của input
            const word = inputWord[i].value;
            //lấy ra id của input sau khi fetch từ api
            const name = inputWord[i].id;
            na[name] = word;
            //từ đoạn này về sau em không biết làm
        }
        fetch('https://jsonplaceholder.typicode.com/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                answer: na
            })
        })
    }

    const new_form = document.querySelector('form');
    new_form.addEventListener('submit', onSubmit);
}
fetch('https://jsonplaceholder.typicode.com/users').then(onResponse).then(data);

Em xin lỗi vì có thể các câu hỏi của em nó thực sự gây khó chịu cho mọi người, em cũng nhận ra là bản thân mình còn yếu kém và cần phải học hỏi nhiều. Vì vậy, em mong mọi người góp ý, chia sẻ ý kiến để bản thân có thể tiến bộ đồng thời trong tương lai em sẽ không còn tiếp tục tình trạng này nữa. Em xin chân thành cảm ơn

câu in đậm (1) này được hiểu là người dùng bấm submit form đúng không?
câu in đậm (2) là như đoạn code trên thì có 8 cái id, đúng không?

tới đây thì có vẻ như có mâu thuẫn rồi, dùng id làm prop name trong khi code của bạn lại dùng value làm prop name?

câu số 3, “nó” mà bạn nói tới là gì?

thật sự cách viết của bạn rất khó hiểu

2 Likes

Mình rất khâm phục là bạn có thể hỏi nhiều vậy.
Nhưng cách diễn đạt của bạn chả đâu vào đâu.
Mình nhìn lướt qua thì hiểu ý định của bạn, nhưng đọc kĩ thì mình “mù” luôn.

Bạn muốn lấy 1 danh sách câu hỏi và đáp án để hiển thị vào các form, nhưng tại sao phải làm nhiều form??? Tất cả các câu hỏi chung form không được à?
Mình thì chả dùng form trong trường hợp này, xử lý AJAX thủ công chứ đâu phải là form tự động của HTML.
Khi nhấn nút Gửi (Submit) thì bạn sẽ gom các đáp án mà người dùng đã chọn để gửi đi.
Đó là tất cả ý định của bạn phải không? Nếu thiếu hãy bổ sung, đủ gọn và đủ rõ ràng, đừng lan man.

4 Likes

Em xin lỗi ạ, em sẽ khắc phục ngay ạ

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