Как корректно отобразить данные из файла json на HTML странице ( переключая значения на самой html странице)
Как корректно отобразить данные из файла json на HTML странице (в том числе переключая на 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>
Источник: Stack Overflow на русском