javascript - How to edit a json file in react - Stack Overflow

admin管理员组

文章数量:1414613

Ok so the pany I'm working in, wants a blog feature on their React website and all of the information from that blog will be stored inside a JSON file. My problem right now is that they also want the React app to allow to edit the JSON file containing all of the information regarding the blog, through the front end. I've tried to change the location of the JSON file to see if that would allow me to edit it, but I can't edit the file whether it's on the public folder or on the src folder. I'm kind of new to react and I don't know exactly where to store the JSON file, in which folder should I store it? And how do I edit the file?

Ok so the pany I'm working in, wants a blog feature on their React website and all of the information from that blog will be stored inside a JSON file. My problem right now is that they also want the React app to allow to edit the JSON file containing all of the information regarding the blog, through the front end. I've tried to change the location of the JSON file to see if that would allow me to edit it, but I can't edit the file whether it's on the public folder or on the src folder. I'm kind of new to react and I don't know exactly where to store the JSON file, in which folder should I store it? And how do I edit the file?

• javascript
• reactjs

Share Improve this question Follow edited Feb 25, 2021 at 9:57 phuzi 13.1k44 gold badges2929 silver badges5959 bronze badges asked Feb 25, 2021 at 9:54 Bruno OliveiraBruno Oliveira 30111 gold badge22 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You can use some JSON editor like react-ace

Put your json file in assets, then import it to your ponent and follow the guide on the README! Your ponent would look like:

const [text, setText] = useState(JSON.stringify(yourJsonFile, null, 2));

function handleChange(text, event) {
  try {
    setText(text && JSON.parse(text));
  } catch (error) {
    // pass, user is editing
  }
}

return (
  <AceEditor
    mode="java"
    theme="github"
    onChange={handleChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
    value={text}
  />
);

In a React project, all your source code and assets are in the src folder. The piler will put everything you need in the public folder. If the JSON file is not copied, you might need a plugin that copies static files to the public folder.

About your other question: do you want the user to be able to edit the JSON as a text string? Then you can just load the JSON and keep it as a string. That string you could put into some text input field. It could look something like this:

fetch('assets/myfile.json')
    .then(responseString => {
        myEditableTextField.value = responseString
    })

To store the results after the user edited it, you will still need some kind of server page (NodeJS or PHP) that can save the file back to a JSON file after editing.

But note this is still bad practice. There is an extremely high chance that the JSON will not be correct after the user has edited it.

It would be better to build some kind of CMS that edits all the JSON properties separately.

fetch('assets/myfile.json')
    .then(responseString => responseString.json())
    .then(data => {
        myEditablenameField.value = data.name
        // etc. for all values in the json file
    })

It would be easy for you, if you load JSON directly into your React app as a response from API call. Instead of downloading .json file.

axios.get("www.website./json").then((response)=>{
   let someData = JSON.parse(response);
   // do whatever you want to do with 'someData'
   // you could make post request to save edited data
   axios.post("www.website./save-json", {editedJSON: JSON.stringify(someData)})

});

本文标签： javascriptHow to edit a json file in reactStack Overflow