Values from deeply nested object

Question

I am trying to return values from a deeply nested variable, but am running into an undefined error.

I am not sure if it is due to having a dot (.) in the object names, or if my nested loop is the correct approach.

I am able to return the values in data1, but my approach does not work for data2 as it is a javascript object. So I created a loop, which returns top values, but I can't return nested ie. user.givenName.

var data1 = {
  "name": "Jane Doe",
  "users_cred": {
    "user.givenName": {
      "value": "Janette"
    },

    "user.bio": {
      "value": "123"
    }
  }
};

var data2 = [{
    "name": "Jane Doe",
    "users_cred": {
      "user.givenName": {
        "value": "Janette"
      },

      "user.bio": {
        "value": "123"
      }
    }
  },
  {
    "name": "John Citizen",
    "users_cred": {
      "user.givenName": {
        "value": "Jonathan"
      }
    }
  }
];

console.log(typeof data2);

for (let i = 0; i < data2.length; i++) {
  var userName = data2[i].name;
  console.log(userName);

  var userCreds = data2[i].users_cred;
  console.log(userCreds);

  // Not returning this value.
  console.log(userCreds.user.givenName);
}