Removing a JSON element and displaying it in the DOM

Question

I receive a JSON from an API call that looks like this

[
    {
        "time1": "17:30",
        "time2": "19:30",
        "day": "Sunday",
        "trainingsid": 1
    },
    {
        "time1": "15:30",
        "time1": "18:30",
        "day": "Monday",
        "trainingsid": 2
    },
]

As soon as I click the Delete button, the element should be removed from the database and additionally it should be removed from the array trainingsData.

The problem is that I remove the element with e.g. the ID 1 from the trainingsData, which also works, I then receive the following JSON object back

[
    {
        "time1": "17:30",
        "time2": "19:30",
        "day": "Sunday",
        "trainingsid": 1
    },
    null
]

My problem now is that the correct data does not appear in the setTrainingsData. This means that both dates are still displayed, although only one time is still available. My question now is, if I can remove the one element from the trainingsData and so that it is also updated?

import React, { useState, useEffect } from 'react'

function Training({}) {
  

    const [trainingData, setTrainingData] = useState([]);
  
    .
    .
    .

    const deleteData = (id) => {
        //setTrainingData([]);
        var json = trainingData;
        console.log(json)
        var key = 2;
        delete json[key]
        console.log(json)
        setTrainingData(json)


    }
    return (
        <div>
            {trainingData.map((d, i) => (
                <div
                    key={i}
                >
                    {d.day} - {d.time1} bis {d.time2} Uhr
                    <button className="button is-danger" onClick={() => deleteTraining(d.trainingsid)}>Delete</button>
                    <br />
                </div>

            ))}
        </div>
    )
}

export default Training

There's no JSON on your question. The response of the server will be JSON, but after parsing it it isn't anymore. Neither `trainingData` nor `json` contain actual JSON. — Andreas, Aug 30 '21 at 09:34
`trainingData` is an array. `delete` is used to delete properties of an _object_. To remove an element from an array you have to use `.splice()` and not `delete` — Andreas, Aug 30 '21 at 09:35
@Andreas thank you! But the problem is with `console.log(trainingData.splice(1, 1)); setTrainingData((trainingData.splice(1, 1)))` the first one is corrent, but the second code deletes the complete trainingData — Mr. Hankey, Aug 30 '21 at 09:41
If you call `.splice(1, 1)` twice it removes two elements. Works as expected (see the documentation) o.O — Andreas, Aug 30 '21 at 09:43
I looked at https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array he said _to remove an element of an array at an index i:_ `array.splice(i, 1);` — Mr. Hankey, Aug 30 '21 at 09:45
I need something like `setTrainingData(() => [trainingData.splice(1, 1)]);` that the set state update will worked, I read something abouth that... but don't know how to do it — Mr. Hankey, Aug 30 '21 at 09:46
`setTrainingData(() => [trainingData.splice(1, 1)])` - Please read the [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice). You definitely don't want that. — Andreas, Aug 30 '21 at 09:53
I don't know why splice would be the best :/ my array looks like this `[ { ... "trainingsid": 1 },`, so i have the id e.g. key. So is there not any better option like json you can delete the the complete entry by key and don't have to search on which place the data is... — Mr. Hankey, Aug 30 '21 at 09:58

score 0 · Answer 1 · answered Aug 30 '21 at 10:09

Slice won't work. With the following code snippet you can delete the element from the array with the id = 1 and get the new array to your use State setTrainingData.

   const id = 1
   var myArray = trainingData.filter(function( obj ) {
        return obj.trainingsid !==  id;
    });
    console.log(myArray)
    //setTrainingData((trainingData.splice(1, 1)))
    setTrainingData(() => [...myArray]);

Removing a JSON element and displaying it in the DOM

1 Answers1