elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  añadir contenido en un archivo JSON externo a traves de JS con fetch()
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: añadir contenido en un archivo JSON externo a traves de JS con fetch()  (Leído 725 veces)
Drakaris

Desconectado Desconectado

Mensajes: 250


Todo lo que puedas imaginar, lo puedes crear.


Ver Perfil
añadir contenido en un archivo JSON externo a traves de JS con fetch()
« en: 28 Febrero 2021, 21:09 pm »

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
  1. [
  2. ]
  3.  

Y en mi javascript genero un objecto que lo guardo en una variable, por ejemplo
Código
  1. let data = {
  2.  "nick": "Drakaris",
  3.  "password": "d404559f602eab6fd602ac7680dacbfaadd13630335e951f097af3900e9de176b6db28512f2e000b9d04fba5133e8b1c6e8df59db3a8ab9d60be4b97cc9e81db",
  4.  "pleasures": [
  5.    "romantic"
  6.  ],
  7.  "dateOfBirth": "2021-02-09",
  8.  "gender": "female"
  9. }
  10.  
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


En línea

Lo increible, no es lo que ves, sino como es
MinusFour
Moderador Global
***
Conectado Conectado

Mensajes: 5.247


I'm fourth.


Ver Perfil WWW
Re: añadir contenido en un archivo JSON externo a traves de JS con fetch()
« Respuesta #1 en: 28 Febrero 2021, 22:03 pm »

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.


En línea

556eknown

Desconectado Desconectado

Mensajes: 153


The art of programming is the skill of controlling


Ver Perfil
Re: añadir contenido en un archivo JSON externo a traves de JS con fetch()
« Respuesta #2 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
  1. async function postData(data) {
  2. fetch("/post", {
  3. method: 'POST',
  4. headers: {'Content-Type':'application/x-www-form-urlencoded'},
  5. body: "data=" + JSON.stringify({user: "admin", pass: "admin"})
  6. }).then((res) => data(res.text().then((text) => console.log(text))));
  7. }
  8. document.querySelector("button").addEventListener("click", () => {
  9. postData((data) => console.log(data));
  10. })
  11.  
back-end:
Código
  1. const express = require("express");
  2. const app = express();
  3. const fs = require("fs");
  4. app.use(express.urlencoded())
  5. app.route("/").get((req, res) => {
  6. res.sendFile(__dirname + "/post.html");
  7. })
  8. app.route("/post").post((req, res) => {
  9. let post_data = JSON.parse(req.body.data);
  10. console.log(post_data);
  11. fs.readFile(__dirname + "/bdd.json", (err, data) => {
  12. if(err)throw err;
  13. data = JSON.parse(data);
  14. data[post_data.user] = post_data.pass;
  15. fs.writeFile(__dirname + "/bdd.json", JSON.stringify(data), (err) => {
  16. if(err)throw err;
  17. res.send("Json uploaded")
  18. })
  19. })
  20. })
  21. app.listen(80)
  22.  
No se si es la mejor respuesta sobre la respuesta, espero haberte ayudado! Si tienes algún problema dimelo! Saludos!
En línea

Drakaris

Desconectado Desconectado

Mensajes: 250


Todo lo que puedas imaginar, lo puedes crear.


Ver Perfil
Re: añadir contenido en un archivo JSON externo a traves de JS con fetch()
« Respuesta #3 en: 2 Marzo 2021, 15:03 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
  1. async function postData(data) {
  2. fetch("/post", {
  3. method: 'POST',
  4. headers: {'Content-Type':'application/x-www-form-urlencoded'},
  5. body: "data=" + JSON.stringify({user: "admin", pass: "admin"})
  6. }).then((res) => data(res.text().then((text) => console.log(text))));
  7. }
  8. document.querySelector("button").addEventListener("click", () => {
  9. postData((data) => console.log(data));
  10. })
  11.  
back-end:
Código
  1. const express = require("express");
  2. const app = express();
  3. const fs = require("fs");
  4. app.use(express.urlencoded())
  5. app.route("/").get((req, res) => {
  6. res.sendFile(__dirname + "/post.html");
  7. })
  8. app.route("/post").post((req, res) => {
  9. let post_data = JSON.parse(req.body.data);
  10. console.log(post_data);
  11. fs.readFile(__dirname + "/bdd.json", (err, data) => {
  12. if(err)throw err;
  13. data = JSON.parse(data);
  14. data[post_data.user] = post_data.pass;
  15. fs.writeFile(__dirname + "/bdd.json", JSON.stringify(data), (err) => {
  16. if(err)throw err;
  17. res.send("Json uploaded")
  18. })
  19. })
  20. })
  21. app.listen(80)
  22.  
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é.
En línea

Lo increible, no es lo que ves, sino como es
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines