Updating property values of JSON object arrays (React JS)

Question

I'm trying to map all the "failed subjects and their points" into one array and add a button for each subject that will increase value of points but only for the item clicked.

JSON file:

{
    "firstyear": {
        "passed": [{ "name": "English", "points": 0 }, { "name": "History", "points": 0 }],
        "failed": [{ "name": "Chemistry", "points": 0 }, { "name": "Agrictulture", "points": 0 }]
    },
    "secondyear": {
        "passed": [{ "name": "Medicine", "points": 0 }, { "name": "Arts", "points": 0 }],
        "failed": [{ "name": "Gym", "points": 0 }, { "name": "German", "points": 0 }]
    },
    "thirdyear": {
        "passed": [{ "name": "Math", "points": 0 }, { "name": "Informatics", "points": 0 }],
        "failed": [{ "name": "French", "points": 0 }, { "name": "Economics", "points": 0 }]
    },
    "fourthyear": {
        "passed": [{ "name": "Litretarue", "points": 0 }, { "name": "Philosophy", "points": 0 }],
        "failed": [{ "name": "Politics", "points": 0 }, { "name": "Gardening", "points": 0 }]
    }
}

Subjects.js:

import {fetchAll} from '../AppFetch';
import {useEffect, useState} from 'react';

export default function Subjects() {

    const [data, setData] = useState({});
      
    useEffect(( ) => {
      fetchAll("http://localhost:3000/example.json", setData)
    }, []);

    const failedArr = [];

    for(let i=0; i<Object.entries(data).length; i++){
      const status = Object.values(data)[i];
  
      for(let j=0; j < Object.keys(status).length; j++){
        const failed=Object.entries(status)[j][1]
        
        failedArr.push(failed[j])
      }
    }
    
    return <div className="row">
      {failedArr.map(key => (
        <div key={key.name}>
          <button>Add point</button>
          <p>{key.name} - {key.points}</p>
        </div>
      ))}
    </div>;
}

After increasing the values they should be updated in the local JSON file.

Whatever I try isn't working so please help if you can.

You need to have a backend api that writes to the file, you can't do it with client side React. Create an endpoint that accepts the newly updated state, and then overwrite the JSON file server side. — Dan Zuzevich
– Dan Zuzevich, Commented Sep 26, 2021 at 16:45
thank you for the helpful information! do you maybe know how can i make this button work for each property of the mapped array? — Egon Adelsberger
– Egon Adelsberger, Commented Sep 26, 2021 at 16:51

ABDULLOKH MUKHAMMADJONOV · Accepted Answer · 2021-09-26 16:50:07Z

1

This task can not be done from frontend. You need a backend server for handling any "write-to-file" task. You can use Node.js express or another alternative.

answered Sep 26, 2021 at 16:50

ABDULLOKH MUKHAMMADJONOV

5,3946 gold badges28 silver badges51 bronze badges

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

2 Comments

Egon Adelsberger Over a year ago

Thank you for the helpful information! Do you maybe know how can I make mapped buttons work, for each item in array?

ABDULLOKH MUKHAMMADJONOV Over a year ago

Briefly, each child must have a unique key prop while you create an array of React elements. Provide a link to your work (github, sandbox) so I can help you out

Collectives™ on Stack Overflow

Updating property values of JSON object arrays (React JS)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related