CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-realtime-databaseaxios
Andrew Baisden
Andrew Baisden

Reputation: 161

Updating Data in Firebase using React and Axios

I'm trying to update some data in a firebase database. However i am unable to get the updateAPI function to work properly. I believe it's something to do with axios.put, the url is probably not traversing the data correctly?

I have tried changing the url but end up with a OPTIONS and CORS errors which means the url is incorrect.

        // API Function calls
        async getAPI(){
                const response = await axios.get('https://fir-test-euifhefibewif.firebaseio.com/todos.json')
                console.log(response)
                console.log(response.data)
            }
            async postAPI(){
                const response = await axios.post('https://fir-test-euifhefibewif.firebaseio.com/todos.json', {name: notesAll})
                console.log(response)
                console.log(response.data)
            }
            async deleteAPI(){
                const response = await axios.delete('https://fir-test-euifhefibewif.firebaseio.com/todos.json')
                console.log(response)
                console.log(response.data)
            }
            async updateAPI(){
                const response = await axios.put('https://fir-test-euifhefibewif.firebaseio.com/todos/-LVYEw6KTltVoEkPeuxY/name/0', {note})
                console.log(response)
                console.log(response.data)
            }

        // Notes notesAll
        const notesAll = [
        {
                "name": "user1",
                "race": "human"
            },
            {
                "name": "user2",
                "race": "human"
            },
            {
                "name": "user3",
                "race": "human"
            },
            {
                "name": "user4",
                "race": "human"
            },
            {
                "name": "user5",
                "race": "human"
            }
        ]

        // Test data
            const note = [
            {
                name: 'Test',
                race: 'Test'
            }
        ]

        // Firebase database example
        {
        "todos": {
            "-LVYIfktKR6fa6ish1aw": {
            "name": [
                {
                "name": "user1",
                "race": "human"
                },
                {
                "name": "user2",
                "race": "human"
                },
                {
                "name": "user3",
                "race": "human"
                },
                {
                "name": "user4",
                "race": "human"
                },
                {
                "name": "user5",
                "race": "human"
                }
            ]
            }
        }
        }

All the code needs to do is update some data inside of an array of objects.

Upvotes: 2

Views: 7372

Answers (1)

Joelgullander
Joelgullander

Reputation: 1684

Try:

    async updateAPI(){
        const response = await axios.put('https://fir-test-euifhefibewif.firebaseio.com/todos/-LVYEw6KTltVoEkPeuxY/name/0', note)
        console.log(response)
        console.log(response.data)
    }

    // Test data
    const note = {
        name: 'Test',
        race: 'Test'
    }

To write to Firebase Database using REST, the URL must end in .json. So:

url = yourUrl + ".json";

Find more information here: https://firebase.google.com/docs/database/rest/save-data

Upvotes: 3

Related Questions