Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

191
Vistas
How Update JSON with express and Vue

I try to update JSON file in backend with express and display new datas on frontend. But currently when I do request I get good response but data don't change.

Server Express (route) Script to edit JSON:

function editJSON(fr,en,es){
    var obj = {
        list_words: []
    }
    fs.readFile('./assets/words.json', 'utf-8', (err, jsonString) =>{
        if(err){
            console.log(err)
        }else {
            try{
                obj  = JSON.parse(jsonString)
                obj.list_words.push({fr: fr, en: en, es: es})
                json = JSON.stringify(obj)
                fs.writeFileSync('./assets/words.json',json,'utf-8',function (err){
                    if (err) throw err;
                    console.log('complete');
                })
            } catch (err){
                console.log(" Error parsing JSON", err)
            }

        }
    })
}

And below script to send data and other to display.

  methods: {
    async addWord () {
      var obj = {
        fr: this.words_input.fr,
        en: this.words_input.en,
        es: this.words_input.es
      }
      const res = await axios.post('http://localhost:3000/addwords', obj)
      const data = res.data
      console.log(data)
    }
  },
mounted: async function () {
    await axios.get('http://localhost:3000/words.json')
      .then(response => {
        this.words_init = response.data
      })
      .catch(error => {
        console.log('There was an error: ' + error.response)
      })
  }

If I restart server after request table with new data is displayed. If you know how I can display informations without restart server this can help me so much.

I tried this

 const res = await axios.post('http://localhost:3000/addwords', obj)
 const data = res.data.list_words
 this.words_init = data

With this route

app.post('/addwords',(req,res)=>{
    console.log(req.body.fr)
    const fr = req.body.fr
    const en = req.body.en
    const es = req.body.es
    editJSON(fr,en,es)
    console.log(fr)
    res.send(words)
    res.status(201).send('created User')
    res.end()
})

But I got error

"Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client"

From back

and

"[Vue warn]: Error in v-on handler (Promise/async): "Error: Request aborted"

From frontend

      const res = await axios.post('http://localhost:3000/addwords', obj)
      this.words_init = res.data.list_words
    ```
with this route everything work But mu new list don't display

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You need to return latest JSON on post response and then assign it to this.words_init variable.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda