Então pessoal, quero entender como funciona a leitura e edição de arquivo JSON. Já tentei de tantas formas, porem sem nenhum resultado. Vou deixar a estrutura base que já tenho aqui para entenderem o meu objetivo.
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste de DB</title>
<link rel="stylesheet" href="Semantic/semantic.min.css">
</head>
<body onload="tablelist()">
<br>
<h1 align="center">Resultado de banco de dados</h1>
<div class="ui container">
<div class="ui raised segment">
<br>
<!-- Texts -->
<div class="ui fluid input">
<input required id="ID" type="number" placeholder="ID">
</div>
<br>
<div class="ui fluid input">
<input required id="Money" type="number" placeholder="Money">
</div>
<br>
<div class="ui fluid input">
<input required id="Bank" type="number" placeholder="Bank">
</div>
<!-- Buttons -->
<div class="ui basic center aligned segment">
<div id="useradd" onclick="add_db()" class="ui green button"><i class="icon plus"></i> Adicionar ID</div>
<div id="userdel" onclick="del_db()" class="ui red button"><i class="icon delete"></i> Remover ID</div>
</div>
<!-- Table -->
<table class="ui inverted blue table">
<thead>
<tr>
<th>ID</th>
<th>Money</th>
<th>Bank</th>
</tr>
</thead>
<tbody id="db_data">
</tbody>
</table>
</div>
</div>
<!-- Script -->
<script src="js/index.js"></script>
<script src="js/jQuery.js"></script>
<script src="Semantic/semantic.min.js"></script>
</body>
</html>
Meu código JS eu deixei apenas a importação dos dados do html, a do arquivo JSON eu não sei fazer, porem ele está localizado em "db/banco.json"
JS:
//Buttons
let useradd = document.getElementById('useradd')
let userdel = document.getElementById('userdel')
//Texts
let userid = document.getElementById('ID')
let usermoney = document.getElementById('Money')
let userbank = document.getElementById('Bank')
//Table
let tablebody = document.getElementById('db_data')
//Functions
function tablelist(){
tablebody.innerHTML += '<tr><td>0001</td><td>500</td><td>2000</td></tr>'
tablebody.innerHTML += '<tr><td>0002</td><td>200</td><td>1300</td></tr>'
}
function add_db(){}
function del_db(){}
JSON:
{
"users":[
{"0001":[
{"Money":"500"},
{"Bank":"2000"}
]},
{"0002":[
{"Money":"200"},
{"Bank":"1300"}
]}
]
}
Visualmente está assim:
O meu objetivo é inserir os 3 valores para adicionar um novo "user" ao arquivo JSON e inserir apenas o ID para remover o "user". A tabela vai ser atualizada ao carregar a página, deixei como exemplo no código da função tablelist()
.