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!
Answer from VanDecisive on Stack OverflowVideos
Você tem que passar por todos os input de class in e input de class on e salvar os valores em um objeto simples, adicionando os valores dos item com um array. Um exemplo de como seria feito seria o seguinte
$(document).ready(function () {
var num = 0
$('#FieldCount').on('change', function () {
$('#Home').empty()
num = $(this).val()
$("#Home").append(`
<br>
<br>
<div class="row changer" style="">
<div class ='col-xs-3'>
<label>Tipo</label>
</div>
<div class ='col-xs-3'>
<label>Nome</label>
</div>
<div class ='col-xs-6'>
<label>Campo</label>
</div>
</div>
`)
for (var x = 0; x < num; x++) {
$(`
<div class="row" >
<label id="Count" >${x + 1}</label>
<div class="col-xs-3">
<select name="${x}" class='fieldtype' style='border: none; outline: none; height: 20px;width: 100%;'>
<option>Input</option>
<option>Combo Box</option>
</select>
</div>
<div class="col-xs-3">
<input class="${x} in" type="text" value="Campo" style="border-radius: 3px; background-color: grey; border: none; outline: none;"/>
</div>
<div class="col-xs-2" class="OpCom${x}">
<select style="display: none;border: none; height: 25px; border-radius: 3px;" name=${x} class="OpCom">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<div class='morein' name=${x}>
</div>
</div>
</div>
`).appendTo('#Home')
}
$('.fieldtype').on('change', function () {
temp_index = $(this).attr('name')
if ($(this).val() == 'Input') {
console.log('input')
{temp_index}`).addClass('in')
$(`.OpCom[name=${temp_index}]`).removeClass('Ready')
$(`.OpCom[name=${temp_index}]`).css('background-color', 'rgba(0,0,0,0)')
$(`.OpCom[name=${temp_index}]`).css('color', 'rgba(0,0,0,0)')
$(`.OpCom${temp_index}`).hide()
$(`.morein[name=${temp_index}]`).hide()
} else {
$(`.OpCom[name=${temp_index}]`).css('background-color', 'buttonface')
$(`.OpCom[name=${temp_index}]`).css('color', 'black')
$(`.OpCom${temp_index}`).append(`
<select style="border: none; height: 25px; border-radius: 3px;" name=${temp_index} class="OpCom">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
`)
console.log('combo')
{temp_index}`).removeClass('in')
{temp_index}`).addClass('on')
console.log(
{temp_index}`).val())
$(`.OpCom[name=${temp_index}]`).addClass('Ready')
$(`.morein[name=${temp_index}]`).show()
$(`.OpCom${temp_index}`).append(`
<select style="border: none; height: 25px; border-radius: 3px;" name=${temp_index} class="OpCom">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
`)
}
var a = $(this).attr('name')
$(`.OpCom[name=${a}]`).show()
$(`.OpCom[name=${a}]`).change(function () {
$(`.morein[name=${a}]`).empty()
for (var z = 0; z < $(`.OpCom[name=${a}]`).val(); z++) {
$(`.morein[name=${a}]`).append(`<input name='${a}i' type=text value="item" style="border: none; border-bottom: 1px solid black; broder-radius: 3px; background-color: grey;" />`)
}
})
})
})
$('#Create').on('click', (event) => {
event.preventDefault();
const home = $('#Home')[0];
let aux = { comboboxs: [], inputs: [] };
aux.comboboxs = getSelects(home);
aux.inputs = getInputs(home);
console.log(aux);
});
});
const getInputs = (home) => {
const inputs = home.getElementsByClassName('in');
const lengthInputs = inputs.length;
const auxInputs = [];
for(let i = 0; i < lengthInputs; i++) {
auxInputs.push(inputs[i].value);
}
return auxInputs;
}
const getSelects = (home) => {
// get OpCom selects
const selects = home.getElementsByClassName('OpCom');
const lengthSelects = selects.length;
const auxSelects = [];
let parent;
let inputsSelect;
let grandparent;
let items;
for (let i = 0; i < lengthSelects; i++) {
// if select display is none continue
if ($(selects[i]).css('display') === 'none') continue;
items = [];
// get div parent of Opcom
parent = $(selects[i]).parent()[0];
inputsSelect = parent.getElementsByClassName('morein')[0];
//get inputs of moreIn
inputsSelect = inputsSelect.getElementsByTagName('input');
for (let j = 0; j < inputsSelect.length; j++) {
items.push($(inputsSelect[j]).val());
}
// get grandparent div
grandparent = $(parent).parent()[0];
// add combobox
auxSelects.push({
// get value from input on
name: grandparent.getElementsByClassName('on')[0].value,
items: items
});
}
return auxSelects;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body style="background-color: #cccccc;">
<div style="text-align: center;"class="container-fluid">
<h2 style="text-align: center;">Gerador de App</h2>
<h4 style="text-align: center;">Quantos campos deseja criar?</h4>
<select id="FieldCount" style="width: 100px; border: none; width: 150px;height: 30px; border-radius: 3px; outline: none;">
<option name="one">1</option>
<option name="one">2</option>
<option name="one">3</option>
<option name="one">4</option>
<option name="one">5</option>
<option name="one">6</option>
<option name="one">7</option>
<option name="one">8</option>
<option name="one">9</option>
<option name="one">10</option>
</select>
<div id="Home">
</div>
<a href=""><button id="Create" style=" margin-top: 100px;bottom: 0; border: none; font-size: 25px; border-radius: 3px;">Criar</button></a>
</div>
</body>
</html>
Olá, sei que essa resposta é em 2020, mas mesmo assim ainda quero ajudar Para você criar um arquivo ".json" ou em qualquer outro formato usando JS você faz assim:
var fs = require('fs');
fs.appendFile('Meu-arquivo.txt'/*Aqui é o nome do arquivo*/, 'Olá mundo'/*Aqui é o conteudo do arquivo*/, function (err) {
if (err) throw err;
console.log('Arquivo Salvo!');
});
Caso você não queria utilizar JQuery pode acessar o arquivo utilizando XMLHttpRequest():
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onreadystatechange = function() {
var status = xhr.status;
if (status === 200) {
//Callback caso de tudo certo
callback(null, xhr.response);
} else {
//Callback caso de algum erro
callback(status, xhr.response);
}
};
xhr.send();
};
//Utilizando o método
getJSON('SeuArquivo.json', function(err, data) {
if (err !== null) {
console.log('Ocorreu um erro' + err);
} else {
//Aqui você manipula os dados e pode percorrer e jogar no HTML
//da forma que achar mais adequada.
console.log(data);
}
});
Caso queria utilizar a biblioteca jquery você deve incluir a biblioteca:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
E após o carregamento da página você pode acessar o arquivo através do método getJSON():
//OnLoad
$(function(){
$.getJSON("SeuArquivo.json", function(data) {
//Aqui você manipula os dados e pode percorrer e jogar no HTML
//da forma que achar mais adequada.
console.log(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Com javascript puro pode-se ler usando XMLHttpRequest (sim, para ler JSON). Primeiro crie um arquivo .json para usar umas das funções. Exemplo:
var xmlhttp = new XMLHttpRequest();
var url = "meu_json.json"; // caminho do arquivo
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
handle(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function handle(arr) {
// forEach aqui para criar o select
}
Ou mais facilmente com jQuery pode-se utlizar a função $.getJSON:
// onde ajax/meu_json.json é o caminho do arquivo
$.getJSON( "ajax/meu_json.json", function( data ) {
// forEach aqui para criar o select a partir de data
});
Um ótimo link para interpretação de sintaxe de JSON é este: http://json.parser.online.fr/ qualquer JSON, que este site interpretar OK sem erros, você poderá utilizar no seu código, porém sobre o seu JSON:
[
{ titulo: 'ET', ano: 1982 },
{ titulo: 'Indiana Jones', ano: 1981 }
]
Este JSON acima é incorreto, veja que se colocar ele no json parser online ele acusa erros.
{
"Titulo": "Até que a sorte nos separe",
"segundo": "segundo valor",
"terceiro": "terceiro valor, o ultimo valor não precisa de virgula"
}
Este JSON acima, é correto, ele não acusará erros, porém não deves utiliza-lo porque você precisa denotar um objeto para acessar objeto.propriedade como eu estou fazendo no Array logo abaixo:
Aqui você tem um Array de Objetos "Filme" onde você pode usa-lo para iterar seus filmes.
ObjetoJSON = {
"filme":[
{
"titulo":"Titulo do seu filme",
"segundo":"segundo valor",
"terceiro":"terceiro valor, o ultimo valor não precisa de virgula"
},
{
"titulo":"Titulo do seu filme 2",
"segundo":"segundo valor 2",
"terceiro":"terceiro valor, o ultimo valor não precisa de virgula 2"
},
{
"titulo":"Titulo do seu filme 3",
"segundo":"segundo valor 3",
"terceiro":"terceiro valor, o ultimo valor não precisa de virgula 3"
}
]
};
ObjetoJSON.filme[0] //seu objeto json do seu filme [0]
ObjetoJSON.filme[0].titulo //seu valor do titulo do filme [0]
ObjetoJSON.filme[0].segundo //o "segundo" valor do filme [0]
ObjetoJSON.filme[0].terceiro// o "terceiro" valor do filme [0]
EDIT:
Para utilizar o JSON dentro de um arquivo da extensão *.json resgatado de um AJAX Request você deve fazer o seguinte:
Utilize o seguinte código JSON (desta vez sem definição por variável) no seu arquivo *.json:
{
"filme":[
{
"titulo":"Titulo do seu filme",
"segundo":"segundo valor",
"terceiro":"terceiro valor, o ultimo valor não precisa de virgula"
},
{
"titulo":"Titulo do seu filme 2",
"segundo":"segundo valor 2",
"terceiro":"terceiro valor, o ultimo valor não precisa de virgula 2"
},
{
"titulo":"Titulo do seu filme 3",
"segundo":"segundo valor 3",
"terceiro":"terceiro valor, o ultimo valor não precisa de virgula 3"
}
]
}
E use este código javascript para que você entenda o JSON, e depois adapte ele do seu jeito que você usa:
$.ajax({
url: 'js/vendor/testedb.json',
dataType: 'json',
success: function(data) {
console.log('Titulo: ' + data.filme[0].titulo + ' Segundo: ' + data.filme[0].segundo);
},
statusCode: {
404: function() {
alert("some problem");
}
},
});
Como fui eu que sugeri o JSON e criei a confusão, vou me explicar: o JSON que postei na outra resposta era inválido (já corrigi), pois em JSON as chaves precisam estar entre aspas duplas, assim como valores do tipo String.
Portanto, o arquivo JSON poderia conter exatamente o que o Gabriel Ribeiro sugeriu:
[
{
"Titulo": "Até que a sorte nos separe",
"duracao": "120 min"
},
{
"Titulo": "Matrix",
"duracao": "140 min"
}
]
(removi os caracteres acentuados para evitar problemas, embora sejam válidos.)
Um exemplo em jQuery para obter e usar esses dados via ajax seria:
$.getJSON(url_do_json, function(dados) {
for(var i=0; i<dados.length; i++) {
$(document.body).append('<div>' + dados[i].titulo + ', ' + dados[i].duracao + '</div>');
}
});
Se você quer apenas copiar o aquivo para outro:
const { createReadStream, createWriteStream } = require('fs');
createReadStream('index.json').pipe(createWriteStream('writeMe.json'));
Não faz diferença ser um json neste caso.
A partir da versão versão 8.x a função fs.copyFile e copyFileSync foram adicionadas:
const { copyFileSync } = require('fs');
fs.copyFileSync('index.json', 'writeMe.json');
fs.copyFile(src, dest[, flags], callback)Asynchronously copies
srctodest.
Em tradução livre:
Copia de forma assíncrona
srcparadest.
Referência: Fastest way to copy file in node.js.
Você tem que fazer o parse, para que o JS possa fazer a leitura dos dados sem problemas.
fs.readFile('index.json', 'utf8', (error, data) => {
//caso haja erro mostra no terminal
if(error){
console.log(error)
}
//se está tudo ok... converte o json
let fileConvert = JSON.parse(data)
//e insere em 'gravador'
gravador.push(fileConvert)
console.log(gravador)
//converter a string para JSON
let dataConverted = JSON.stringify(gravador)
//insere o conteudo do arquivo em outro arquivo JSON
fs.writeFileSync('indexNEW.json', dataConverted, (err, result)=> {
console.log(result)
})
})