CODEWITHSUNDEEP
javascriptjsonreactjsaxios
Sima Ghoreyshi
Sima Ghoreyshi

Reputation: 427

use axios.patch with a nested JSON

There's a nested JSON object defined in the server side code of the website that I'm working on, like this:

userinfo:{
   first_name,
   last_name,
   profile:{
      avatar,    //here is the field I need to access!!!
      id,
      some other properties...
   }
}

and I want to upload the avatar picture and as you can see, the avatar property is inside a JS object that is itself inside another JS object,

I'd appreciate it if someone help me with these questions:

  1. how can I access the avatar property and
  2. how should I write the axios.patch() code to upload the avatar file?

Upvotes: 1

Views: 1371

Answers (2)

Robby Wijaya
Robby Wijaya

Reputation: 11

  • Answer for number 1, You can get avatar property in :

userinfo.profile.avatar

  • Answer for number 2, to upload the avatar file use axios you can try this code :

var formData = new FormData();

formData.append('file', userinfo.profile.avatar);

await axios.post('your endpoint url', formData, {
  headers: {
    'Content-Type': 'application/json'
  }   
})
.then(response => {
  // handle response
  console.log(response);
.catch(error => {
  // handle error
  console.log(error.response);
});

Upvotes: 1

Rudraprasad Das
Rudraprasad Das

Reputation: 368

  1. To access nested keys inside a Javascript Object, you can use the dot (.) notation. In your case, you can doo something like this
// assuming an object with value
const obj = {
  userinfo: {
    first_name: 'first name',
    last_name: 'last name',
    profile:{
      avatar: 'https://some-url',    //field to be accessed
      id: 'xxx-xxx-xxx',
      some other properties...
    }
  }
}

// logging avatar
console.log(obj.userinfo.profile.avatar); // prints "https://some-url"
  1. Axios Patch is an async function, you can use it like this -
axios.patch('https://url-endpoint.co', { 
  avatar: obj.userinfo.profile.avatar
}).then(res => {
  // do something on success
  console.log(res);
}).catch(err => {
  // do something on error
  console.log(err);
});

You can read more about axios here - https://github.com/axios/axios#request-method-aliases

Upvotes: 1

Related Questions