How to destructure an object parameter and extract a specific property

Hi everyone, I am very new to JS.

I want to Modify the displayBirthdate function to display a user’s age from the API call in getAUserProfile() in a DIV with a CSS class of details. The parameters in displayBirthdate must use destructuring, so I need to extract the age from the object. This is for a challenge I am trying, I have solved 4/5 and I am just stuck here, any ideas ad hits will be useful

var displayBirthdate = ({dob}) => {
      document.querySelector('.details').textContent = dob.age + 'years old';
    };
    var displayAddress = ({location = 'location'}) => {};
	var displayPhone = ({phone = 'phone', cell = 'cell'}) =>{};


    const displayExtraUserInfo = (param) => {
      document.querySelector('#btn-birthdate').addEventListener('click', () => {
        displayBirthdate(param);
      });
      document.querySelector('#btn-phone').addEventListener('click', () => {
        displayPhone(param);
      });
      document.querySelector('#btn-address').addEventListener('click', () => {
        displayAddress(param);
      });
    };
      
      
      const notify = (msg) => {
        const toastr = document.querySelector('.messages');
        if(!toastr) return;
        
        toastr.textContent = msg;
        if(!toastr.classList.contains('on')) {
          toastr.classList.add('on');
        }
      };
      
      const clearNotice = () => {
        const toastr = document.querySelector('.messages');
        if(!toastr) return;
        
        toastr.textContent = '';
        toastr.classList.remove('on');
      };
      
      const displayUserPhotoAndName = (data) => {
        if(!data) return;
        
        // add your code here
        //destrucure obj data
        let {results} = data;
        //destructure arr 
        let [profile] = results;
        
       //Assign Name
        document.querySelector('h2').textContent = profile.name.title + ' '+profile.name.last+' '+profile.name.first;
        //Display Image
        document.querySelector('img').src = profile.picture.large;
        
        clearNotice();
        
        //call display extra info function
        displayExtraUserInfo(profile);        
      };
            
      const getAUserProfile = () => {
        const api = 'https://randomuser.me/api/';
        
        // make API call here
        fetch(api)
		.then(res => res.json())
		.then(results => {return displayUserPhotoAndName(results)});

        
        notify(`requesting profile data ...`);
      };
      
      const startApp = () => {
        // invoke the getAUserProfile here
        getAUserProfile();
      };

      startApp();
    </script>

can anyone take a look at my code and tell me what I am getting wrong?

1 Like

I think the challenge wants you to fully destructure the user parameter, such that you never create a variable called dob at all, only age. You can do that like this:

const user = {
  name: 'Anneke van Dijk',
  dob: {
    date: new Date('1983-09-21T19:43:47.708Z'),
    age: 35
  }
};

const getAge = ({ dob: { age } }) => age;

getAge(user); // 35