Update existing field in local json file in React Native

Question

I'm working on an app where I have some data stored in the local JSON file. Initially, I'm showing that data using SectionList. And there are some fields to update the values of some fields of that data. My data looks like this:

   { 
        "title": "Terminal Settings",
        "data": [
            { "title": "Keypad", "id": 1, "isSelected": false},
            { "title": "Menu", "id": 2 , "isSelected": false},
            { "title": "Tabs", "id": 3, "isSelected": false},
            { "title": "Mobile", "id": 4, "isSelected": false}
        ]
    },

Now from UI, I want to change the status of isSelected field through the checkbox and also want to change it in the JSON file. So whenever I will access this data it should show isSelected: true.

How to do this? Do I need to use AsyncStorage for this?

Yes, no I’m not using redux! For this taks they have gave me option of AsyncStorage. — mr.volatile
– mr.volatile, Commented Oct 15, 2022 at 18:33
Does this answer your question? write/edit/overwrite a json file in react native — Khurshid Ansari
– Khurshid Ansari, Commented Oct 16, 2022 at 8:44

coderpolo · Accepted Answer · 2022-10-15 18:27:20Z

0

I think you will definely have to open and modify the content of your file at some point, so your should need some filesystem. The best would be to simple get your json object with

const myData = require('./myDataJsonFile.json');

then modify it with for example $json[0]['data'][1]['isSelected'] = true

and finally save this in your file, replacing the file content with your $json

answered Oct 15, 2022 at 18:27

coderpolo

2943 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mr.volatile Over a year ago

Hi coderpolo, Thank you for answer. But this answer doesn’t solve my problem. I’m able to read data and show on UI. I want to modify it.

coderpolo Over a year ago

Okay, i guess you managed to 'clone' the json data in your file in an object that your UI can modify, then you will need to add an extra step where you save your object in the desired file. I think for that you should check something like this : waldo.com/blog/react-native-fs

coderpolo Over a year ago

const writeFile = () => { var path = RNFS.DocumentDirectoryPath + '/test.txt'; RNFS.writeFile(path, 'This is a content from Waldo', 'utf8') .then(() => console.log('FILE WRITTEN!')) .catch((err) => console.log(err.message)); }

Collectives™ on Stack Overflow

Update existing field in local json file in React Native

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related