angular2 http.post() to local json file

Question

little help?

I am trying to write pure JSON to a file inside my project, my project tree looks like this:

src
->app
-->components
--->people.component.ts
--->(other irrelevant components)
-->services
--->people.service.ts
-->data
--->JSON.json
->(other irrelevant src files)

The code in my people.component.ts is just used to call and subscribe to a function inside my people.service.ts, passing the newPerson property which is data-binded from the DOM using angular2 magic; this is the function inside name.service.ts:

public addPerson(newPerson) {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.post('app/data/PEOPLE.json', newPerson, { header: headers })
        .map(res => res.json())
}

My objective is to write (if necessary replace) the newPerson property (or the entire file) inside PEOPLE.json. of course, the current addPerson() function returns an error.

I've also tried the put method, it errors slightly differently, but i haven't found solutions to either method.

I know categorically it's not an error with the format/type of data i'm trying to put in PEOPLE.json file.

You need a server side component to handle the writing.

Sami Kuhmonen
– Sami Kuhmonen

2017-02-03 21:38:53 +00:00
Commented Feb 3, 2017 at 21:38 — Sami Kuhmonen
– Sami Kuhmonen, Commented Feb 3, 2017 at 21:38

Justin Smith · Accepted Answer · 2017-02-03 22:03:13Z

Unfortunately, you can not PUT or POST directly to a file on your local filesystem using client side (browser) JavaScript.

Consider building a simple server to handle a POST request. If you are most comfortable with JavaScript, try Express with Node.js

// server.js
'use strict'

const bodyParser = require('body-parser');
const express = require('express');
const fs = require('fs');

const app = express()
app.use(bodyParser.json());

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8000');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'POST');
  next();
});

app.post('/', (req, res) => {
  console.log('Received request');
  fs.writeFile('json.json', JSON.stringify(req.body), (err) => {
    if (err) throw err;
    console.log('File written to JSON.json');
    res.send('File written to JSON.json')
  })
});

app.listen(3000, ()=>{
  console.log('Listening on port 3000. Post a file to http://localhost:3000 to save to /JSON.json');
});

A. Tim · Accepted Answer · 2017-02-03 21:53:45Z

2

You cannot write to files from Browser. Period. Even if such action is possible it will be stored on User side, not your server. If your task is indeed to write something on user end, please refer to localStorage documentation (or couple other API implementations). But if you are going to user that file for some purpose outside of your browser, it will be non-trivial task.

If you want to save file on server, then you need to hande it on back end.

answered Feb 3, 2017 at 21:53

A. Tim

3,2161 gold badge15 silver badges15 bronze badges

2 Comments

Guy K Over a year ago

How would this kind of functionality work on an android platform then? - suppose I'm using Nativescript-angular for this? Also is there's a way to persist localstorage? If so that is the solution

A. Tim Over a year ago

hm, you never mentioned in your question, that you work with android platform. Unfortunately, I do not have experience with that :( There might be own ways to deal with that... However, I still hope it should have storage API. As far as I know, LocalStorage used for: a) sharing data between 2 instances of same web app (i.e. open website in 2 tabs); b) offline apps (and browser extensions) c) hacks (I used it for auto file downloading from web on machine where I didn't have administrator permissions to install/launch apps)

Collectives™ on Stack Overflow

angular2 http.post() to local json file

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related