Khó khăn về fetch trong javascript

Cho em hỏi là làm thế nào để mình cho các label và span trong html có nội dung giống như answers ở trong tệp json kia được không ạ. Em làm đến phần function data kia là không biết phải làm tiếp như nào nữa. Em xin cảm ơn

function onresponse(response) {
    return response.json();
    }

    function data(data) {
    const thespan = document.querySelector('span');

     }
     fetch('newscript.json')
    .then(onresponse).then(data)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="script.js" defer></script>
</head>

<body>
    <form>
        <div>
            <span></span>

            <input type="radio">
            <label>1</label><br>

            <input type="radio">
            <label>2</label><br>

            <input type="radio">
            <label>3</label><br>

            <input type="radio">
            <label>4</label><br>
        </div>
    </form>
</body>

</html>
{
    "questions": [{
            "_id": "5f6bb73997518f0bc82e4238",
            "answers": [
                "<body style=\"background-color:yellow;\">",
                "<background>yellow</background>",
                "<body bg=\"yellow\">"
            ],
            "text": "What is the correct HTML for adding a background color?",
            "__v": 0
        },
        {
            "_id": "5f6bb98acc65b72a7c5b1ea7",
            "answers": [
                " True",
                " False"
            ],
            "text": "Inline elements are normally displayed without starting a new line.",
            "__v": 0
        },
        {
            "_id": "5f6bb58597518f0bc82e4231",
            "answers": [
                "Mozilla",
                "Microsoft",
                "Google",
                "The World Wide Web Consortium"
            ],
            "text": "Who is making the Web standards?",
            "__v": 0
        },
        {
            "_id": "5f6bb7cb97518f0bc82e423a",
            "answers": [
                "<italic>",
                "<i>",
                "<em>"
            ],
            "text": "Choose the correct HTML element to define emphasized text",
            "__v": 0
        },
        {
            "_id": "5f6bb90f309505421cde9ea5",
            "answers": [
                "<a href=\"url\" target=\"_blank\">",
                "<a href=\"url\" target=\"new\">",
                "<a href=\"url\" new>"
            ],
            "text": "How can you open a link in a new tab/browser window?",
            "__v": 0
        },
        {
            "_id": "5f6bb67997518f0bc82e4233",
            "answers": [
                "<head>",
                "<heading>",
                "<h1>",
                "<h6>"
            ],
            "text": "Choose the correct HTML element for the largest heading:",
            "__v": 0
        },
        {
            "_id": "5f6bb894d9a1ce2cf0717212",
            "answers": [
                "<a url=\"http://www.w3schools.com\">W3Schools.com</a>",
                "<a name=\"http://www.w3schools.com\">W3Schools.com</a>",
                "<a>http://www.w3schools.com</a>",
                "<a href=\"http://www.w3schools.com\">W3Schools</a>"
            ],
            "text": "What is the correct HTML for creating a hyperlink?",
            "__v": 0
        },
        {
            "_id": "5f6bb8cbd8d2fe3bf4028283",
            "answers": [
                "/",
                "*",
                "^",
                "<"
            ],
            "text": "Which character is used to indicate an end tag?",
            "__v": 0
        },
        {
            "_id": "5f6bb9b3381b613e202fc797",
            "answers": [
                "<dl>",
                "<ol>",
                "<ul>",
                "<list>"
            ],
            "text": "How can you make a numbered list?",
            "__v": 0
        },
        {
            "_id": "5f6bb465933d010004ef1b13",
            "answers": [
                "Hyper Text Markup Language",
                "Hyperlinks and Text Markup Language",
                "Home Tool Markup Language"
            ],
            "text": "What does HTML stand for?",
            "__v": 0
        }
    ],
    "completed": false,
    "score": 0,
    "_id": "5f6d6ca8f460e14320ad56f9",
    "startedAt": "2020-09-25T04:06:01.242Z",
    "__v": 0
}

Mình đánh giá đây là 1 câu hỏi fake. Hay nói đúng hơn: bạn đang uống trà sữa bằng nĩa rồi cứ thắc mắc tại sao không hút được :smiley:

Kiến thức cần củng cố: CSS Selector, thao tác với các Element theo cú pháp liên quan Selector trong JavaScript.

Nhìn qua code bạn ở trên thì thấy rằng bạn chưa hiểu cách để làm sao nạp giá trị vào HTML từ JavaScript, không nhận dạng được Element, node thì làm sao mà nạp giá trị / thay thế giá trị cho nó? Fetch phiếc gì ở đây? <= chưa bàn vội.

4 Likes

Cảm ơn bạn đã đưa ra lời khuyên, mình sẽ tiếp thu và khắc phục.

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