-1

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:

inserir a descrição da imagem aqui

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().

1 Resposta 1

1

Bom neste caso seria necessário escrever as alterações no back-end

Se é algo totalmente temporário, no Client-Side basta utilizar o

var jsonObj = {"users":[{"0001":[{"Money":"500"},{"Bank":"2000"}]},{"0002":[{"Money":"200"},{"Bank":"1300"}]}]}; // obtem esses dados do db/banco.json e realiza a alteração..
localStorage.setItem('jsonObj', JSON.stringify(jsonObj)); // salva no localStorage

// para obter o jsonObj do localStorage
var jsonObj = JSON.parse(localStorage.getItem('jsonObj'));

Mas se é algo que você deseja realmente alterar no arquivo banco.json de forma global. E se as engines que está utilizando é somente JavaScript envie um POST com o obj modificado para o back-end (Nodejs, Php, etc) e toda vez que for fazer uma chamada, os dados do jsonObj = {}; estaram atualizados.

fetch('url', {method: 'post', mode: 'cors', body: JSON.stringify(jsonObj)})
.then((response) => {
    return response.json();
}).then((resJsonObj) => {
    //retorno do json modificado..
    //dai aqui você renderiza os dados da forma que quiser, nos respectivos campos (Id, Money e Bank)
});

Acredito que não seja exatamente desta forma que queres, mas espero que eu possa ter lhe ajudado de alguma forma. Boa sorte!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .