How to save new state to local json

Question

I have a local JSON file which is used for loading all data to app. In one component I load in constructor() those data. In function addRow() I add new field but it's just in local state variable. I would like to add it to json file also, so after refresh this new row will be still here.

I was trying find how this solved really easy but I didn't find it. If you know about some topic send it to me.

constructor() {
    super();
    this.state = {
        employees: require('json!../../../data/employees.json')
    };
    this.addEmployee = this.addEmployee.bind(this);
}

addEmployee(employee) {
    this.setState({
        employees: this.state.employees.concat([employee])
    });
}

Or some javascript (node.js) plugin for react which can work with json — Martin Jinda, Nov 02 '16 at 10:03
No, you can't write files with just client side code, you need backend for this. — dfsq, Nov 02 '16 at 10:20

score 4 · Accepted Answer · edited May 23 '17 at 12:07

4

You can't access the file system from the browser for security reasons. If you just want to access it after refreshing, I guess that you could save it in localStorage when you modify the state and then use it when the component is loaded it if it's not undefined (you can check this in componentDidMount). (The code below is not tested)

addEmployee(employee) {
    let newEmployees = this.state.employees.concat([employee])
    localStorage.setItem('employees', JSON.stringify(newEmployees));
    this.setState({
        employees: newEmployees
    });
}


componentDidMount(){
     let newEmployees = localStorage.employees
     if(newEmployees != undefined){
         this.setState({
             employees: JSON.parse(newEmployees)
         });
     }
}

If you want to store that JSON persistently and you want more than being able to use it after refreshing, you should do it on the backend. You can also let the user save the file manually (with a download prompt) as it's described here.

edited May 23 '17 at 12:07

Community

1
1

answered Nov 02 '16 at 10:32

César Landesa

2,626
1
13
18

Shoudn't be `if (localStorage.employees != undefined) {` instead `employees` – Martin Jinda Nov 02 '16 at 13:05
Plus while adding it gives me an error `Uncaught TypeError: JSON.stringfy is not a function(…)`. Do I have to import some library for it ? I thought it's a built-in function. – Martin Jinda Nov 02 '16 at 13:06
Yes, it's newEmployees (or localStorage.employees) and stringify, I edited the answer, you should also parse the stringified JSON when you get it from localStorage. – César Landesa Nov 02 '16 at 13:12
Could you also help with that? I tried it this way. http://pastebin.com/sVqkLMAH. It gives me `map is not a function` – Martin Jinda Nov 02 '16 at 13:21
In the edited answer I already added the JSON.parse method to get the object back from the string so that you can use map directly with the object you get from the state :) `this.setState({ employees: JSON.parse(newEmployees) });` – César Landesa Nov 02 '16 at 13:30
With this setting `addEmployee()` doesn't work and it gives me followin error `Uncaught TypeError: this.state.employees.map is not a function` – Martin Jinda Nov 02 '16 at 13:43
Did you try using console.log(this.state.employees) to see its value? If it's an array it should work. – César Landesa Nov 02 '16 at 13:57
Yes, I tried it and it's array. I don't understand why it's happened, because this `map()` use only for create rows in table. And this problem it's called when I try to add new user. – Martin Jinda Nov 02 '16 at 14:04
Is the data formatted with {} or []? This is likely to be a formatting issue of some kind. [This answer might help](http://stackoverflow.com/questions/30142361/react-js-uncaught-typeerror-this-props-data-map-is-not-a-function) – César Landesa Nov 02 '16 at 14:18
In chrome console it's `[Object, Object, ...]` – Martin Jinda Nov 02 '16 at 14:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127195/discussion-between-mardzis-and-cesar-landesa). – Martin Jinda Nov 02 '16 at 15:03

score 0 · Answer 2 · answered Nov 02 '16 at 10:05

0

There is no way to do it from the client/browser, since they do not have access to file system (form security considerations). You'll to do it on the backend.

answered Nov 02 '16 at 10:05

Alexandr Lazarev

12,554
4
38
47

How to save new state to local json

2 Answers2