añadir contenido en un archivo JSON externo a traves de JS con fetch()
(1/1)
Drakaris:
Buenas, quisiera añadir un objecto a un JSON externo con javascript, esto es posible con el fetch() de JS o XMLHttpRequest?
Es decir, yo tengo un JSON en /jon/users.json (inicialmente esta vacio)
Código
[
]
Y en mi javascript genero un objecto que lo guardo en una variable, por ejemplo
Código
let data = {
"nick": "Drakaris",
"password": "d404559f602eab6fd602ac7680dacbfaadd13630335e951f097af3900e9de176b6db28512f2e000b9d04fba5133e8b1c6e8df59db3a8ab9d60be4b97cc9e81db",
"pleasures": [
"romantic"
],
"dateOfBirth": "2021-02-09",
"gender": "female"
}
y este lo quiero guardar en el JSON /json/users.json
Para ello, según tengo entendido se puede hacer con el fetch() metodo POST?
Algo así
Código:
let data = getDataForm() //obtengo el objeto generado dinamicamente
fetch("json/users.json",{
method: "POST",
body: JSON.stringify(data),
headers:{
"Content-type":"application/json"
}
}).then((result)=>result.json())
.then(dat=>console.log(dat))
.catch(err=>console.log(err));
Esto me devuelve una array vacio y cuando voy al archivo JSON no me a implementado nada.
Se puede hacer lo quiero hacer?
https://drive.google.com/drive/folders/1BiDcjrPZ3-8qtq9B7ps-dSIu6-neaqY-?usp=sharing
Gracias de antemano
MinusFour:
Tu servidor tendría que manejar que POST sobre la ruta json/users.json agregue el archivo JSON. No es algo que un servidor web haga por defecto.
Los servidores de object storage por lo general usan una API similar. AWS S3, MinIO, etc.
UnaiiM:
Claro que si, pero en el servidor ha de tener una manera de coger el post y sobre escribir el contenido de la base de datos por el del post:
Front-end:
Código
async function postData(data) {
fetch("/post", {
method: 'POST',
headers: {'Content-Type':'application/x-www-form-urlencoded'},
body: "data=" + JSON.stringify({user: "admin", pass: "admin"})
}).then((res) => data(res.text().then((text) => console.log(text))));
}
document.querySelector("button").addEventListener("click", () => {
postData((data) => console.log(data));
})
back-end:
Código
const express = require("express");
const app = express();
const fs = require("fs");
app.use(express.urlencoded())
app.route("/").get((req, res) => {
res.sendFile(__dirname + "/post.html");
})
app.route("/post").post((req, res) => {
let post_data = JSON.parse(req.body.data);
console.log(post_data);
fs.readFile(__dirname + "/bdd.json", (err, data) => {
if(err)throw err;
data = JSON.parse(data);
data[post_data.user] = post_data.pass;
fs.writeFile(__dirname + "/bdd.json", JSON.stringify(data), (err) => {
if(err)throw err;
res.send("Json uploaded")
})
})
})
app.listen(80)
No se si es la mejor respuesta sobre la respuesta, espero haberte ayudado! Si tienes algún problema dimelo! Saludos!
Drakaris:
Cita de: 556eknown en 1 Marzo 2021, 23:44 pm
Claro que si, pero en el servidor ha de tener una manera de coger el post y sobre escribir el contenido de la base de datos por el del post:
Front-end:
Código
async function postData(data) {
fetch("/post", {
method: 'POST',
headers: {'Content-Type':'application/x-www-form-urlencoded'},
body: "data=" + JSON.stringify({user: "admin", pass: "admin"})
}).then((res) => data(res.text().then((text) => console.log(text))));
}
document.querySelector("button").addEventListener("click", () => {
postData((data) => console.log(data));
})
back-end:
Código
const express = require("express");
const app = express();
const fs = require("fs");
app.use(express.urlencoded())
app.route("/").get((req, res) => {
res.sendFile(__dirname + "/post.html");
})
app.route("/post").post((req, res) => {
let post_data = JSON.parse(req.body.data);
console.log(post_data);
fs.readFile(__dirname + "/bdd.json", (err, data) => {
if(err)throw err;
data = JSON.parse(data);
data[post_data.user] = post_data.pass;
fs.writeFile(__dirname + "/bdd.json", JSON.stringify(data), (err) => {
if(err)throw err;
res.send("Json uploaded")
})
})
})
app.listen(80)
No se si es la mejor respuesta sobre la respuesta, espero haberte ayudado! Si tienes algún problema dimelo! Saludos!
Ok, muchas gracias lo miraré.
Navegación