implementing Nested JSON Objects in Axios Response - Missing Data in Vue.js
I'm collaborating on a project where This might be a silly question, but I'm stuck on something that should probably be simple... I'm working with a question when making an API call using Axios in my Vue.js application. The API returns a nested JSON object, but when I try to access the properties, some of them appear to be missing. The API's response looks like this: ```json { "data": { "user": { "id": 1, "name": "John Doe", "email": "john@example.com", "profile": { "age": 30, "bio": "Software Developer" } }, "status": "success" } } ``` However, when I attempt to access the `profile` properties, I get `undefined`. Here's the code snippet where I'm handling the response: ```javascript axios.get('https://api.example.com/user/1') .then(response => { const user = response.data.user; console.log(user.profile.age); // This logs 'undefined' }) .catch(behavior => { console.behavior('behavior fetching user:', behavior); }); ``` I verified that the API is responding correctly using Postman, and I can see the full JSON response, so it seems like an scenario with how I'm accessing the nested data. I also tried logging the entire `response.data` object and it looks correct: ```javascript console.log(response.data); ``` I get the expected structure, but directly accessing `user.profile` leads to undefined values. I'm using Axios version 0.21.1 and Vue.js version 2.6.12. Has anyone encountered a similar scenario, or could there be something I'm overlooking about how nested objects are handled in the response? My development environment is Windows. Thanks in advance! This is part of a larger CLI tool I'm building. Any suggestions would be helpful. Thanks for taking the time to read this!