ReactJs How to Add a new field to each reacord in state array object-CodePudding

In my ReactJs app (using functional components and state 'hooks') I fetch a Json file and store it in the state but I want to add a new field with the same value for EACH record in the array. I understand I have to create a new mutable array but not not sure how to loop through the array and add the field etc. Note, I cannot alter the original json file.

Json data (sample):

[
    {
        "id": 3565,
        "user_id": 3155,
        "course_id": 7,
        "type": "StudentEnrollment",
        "created_at": "2018-06-20T15:50:14Z",
        "updated_at": "2018-06-20T15:50:14Z",  
    },
    {
        "id": 15092,
        "user_id": 3155,
        "course_id": 25,
        "type": "StudentEnrollment",
        "created_at": "2020-08-25T14:23:43Z",
        "updated_at": "2020-08-25T14:23:43Z",       
    },
    {
        "id": 19112,
        "user_id": 3155,
        "course_id": 87,
        "type": "StudentEnrollment",
        "created_at": "2021-05-25T13:11:36Z",
        "updated_at": "2022-03-10T11:02:59Z",
        
    }
]

Current code:

const [tableData, setTableData] = useState([])

useEffect(() => {
        if (fetchUrl) {
            fetch(fetchUrl)
                .then((data) => data.json())
                .then((data) => setTableData(data))                
        }

    }, [fetchUrl])

//TODO...Add a new field called 'webHost' with value "Instructure" for each record in state object so new data would be...

[
    {
        "id": 3565,
        "user_id": 3155,
        "course_id": 7,
        "type": "StudentEnrollment",
        "created_at": "2018-06-20T15:50:14Z",
        "updated_at": "2018-06-20T15:50:14Z",  
        "webHost": "Instructure",
 },
    {
        "id": 15092,
        "user_id": 3155,
        "course_id": 25,
        "type": "StudentEnrollment",
        "created_at": "2020-08-25T14:23:43Z",
        "updated_at": "2020-08-25T14:23:43Z",       
        "webHost": "Instructure",
    },
    {
        "id": 19112,
        "user_id": 3155,
        "course_id": 87,
        "type": "StudentEnrollment",
        "created_at": "2021-05-25T13:11:36Z",
        "updated_at": "2022-03-10T11:02:59Z",
        "webHost": "Instructure",
    }
]

CodePudding user response：

In order to add a property in each object of the array you can map it add the property and store the new array in the state:

const [tableData, setTableData] = useState([])

useEffect(() => {
        if (fetchUrl) {
            fetch(fetchUrl)
                .then((data) => data.json())
                .then((data) => {
                   const arr = data.map(obj => ({ ...obj, "webHost": "Instructure"}))
                   setTableData(arr);
                })                
        }
    }, [fetchUrl])

CodePudding user response：

i would sort this out this way:

const [tableData, setTableData] = useState([])

useEffect(() => {
        if (fetchUrl) {
            fetch(fetchUrl)
                .then((data) => data.json())
                .then((data) => {
                  const withWebHost= data.map(record=>({...record,webHost:'Infrastructure'}))
                   setTableData(withWebHost)
           })                
        }

    }, [fetchUrl])