主页 / 问题 / 1520544
Accepted
almaz
Asked:2023-05-18 16:36:49 +0000 UTC2023-05-18 16:36:49 +0000 UTC

如何在 HTML 页面上正确显示来自 json 文件的数据（在 html 页面本身上切换值）

  • 772

如何在 HTML 页面上正确显示来自 json 文件的数据（包括切换到 HTML 值）

文件内容data.json：

data = {
    "Сергей": {
        "возраст": 34,
        "пол": "мужской"
    },
    "Марат": {
        "возраст": 39,
        "пол": "мужской"
    }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--> <script src="script.js"></script> -->

</body>

</html>

    <tr>
        <th><label for="id_name">Выберите имя:</label></th>
        <td>
            <select name="regime" id="id_name">
                <option value="здесь должно быть имя № 1"></option>
                <option value="здесь должно быть имя № 2 и тд"></option>
            </select>
        </td>
    </tr>

    <tr>
        <th><label for="age">Возраст:</label></th>
        <td>
            <input type="number" name="age" id="age">
        </td>
    </tr>
    <tr>
        <th><label for="sex">пол:</label></th>
        <td>
            <input type="text" name="sex" id="sex">
        </td>
    </tr>

<!-- end -->

    <!--  My_script_Test  -->
    <script>

        // 1. method: read local file and show them in console.log
        fetch('./data.json')  // read local_json_file
        .then(res => res.json())
        .then(data => {
            console.log(data)
        })

    </script>

页面示例

javascript

1 个回答

  1. Best Answer
    1. 输入一个变量data。从文件加载数据时，将它们放入变量中。并将动态option 正确的属性添加到select
    2. 在事件上挂一个侦听器（addEventListener），在其中选择数据时，对变量中的数据进行操作selectchangedata
    3. 基本上一切。
    • 1

相关问题