Image for post
Image for post

The Most Horrible and Amazing Language: JavaScript!

Oh, pesky JavaScript! How has this language thrived? It has grown-up in the place that we now live … the browser. For most client-side things, it is the only show in town, especially as Flash and Microsoft (I forget it’s name) have both left the stage.

JavaScript is both amazing and absolutely terrible at the same time. And JSON objects? Ahhhh! For this, there’s one little line of code that is essential:

alert(myjson);

So, here’s a little tip I learnt today when debugging with Google Firebase. For this I received the following JSON object when the user uses a Twitter login:

{"user":{"uid":"vxfdsss","displayName":"Fred Smith","photoURL":"https://pbs.twimg.com/profile_images/777/7Nm_normal.jpg","email":null,"emailVerified":false,"phoneNumber":null,"isAnonymous":false,"tenantId":null,"providerData":[{"uid":"226900035","displayName":"Fred Smith","photoURL":"https://pbs.twimg.com/profile_images/777/7Nm_normal.jpg","email":"fred@home","phoneNumber":null,"providerId":"twitter.com"}],...

This contains their email address, photo and unique ID. So let’s unpick it:

{"user":{
"uid":"vxfdsss",
"displayName":"Fred Smith",
"photoURL":"https://pbs.twimg.com/profile_images/777/7Nm_normal.jpg",
"email":null,
"emailVerified":false,
"phoneNumber":null,
"isAnonymous":false,
"tenantId":null,
"providerData":[{"uid":"226900035",
"displayName":"Fred Smith",
"photoURL":"https://pbs.twimg.com/profile_images/777/7Nm_normal.jpg",
"email":"fred@home",
"phoneNumber":null,
"providerId":"twitter.com"}],...

So to read the user’s email address we can use the notation of result.user.email or user[“email”]:

<script>function twitterSignin() {
var provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithPopup(provider)

Thus we can have result.user.uid, result.user.displayName, and so on. But the email address is “null” in the user part, and where the actual user name is contained in the providerData field. So how do we access that?

Well, to access result.user.providerData gives:

[{"uid":"226900035",
"displayName":"Fred Smith",
"photoURL":"https://pbs.twimg.com/profile_images/777/7Nm_normal.jpg",
"email":"fred@home",
"phoneNumber":null,
"providerId":"twitter.com"}],... }]

But, look, there’s a square backet in front of the JSON object. We can’t just use it as we have done before. What this signifies, is that we have an array object. So we actually need to access it with

result.user.providerData[0]

And now showing this gives:

{"uid":"226900035",
"displayName":"Fred Smith",
"photoURL":"https://pbs.twimg.com/profile_images/777/7Nm_normal.jpg",
"email":"fred@home",
"phoneNumber":null,
"providerId":"twitter.com"}],... }

and after this we can access with:

result.user.providerData[0].email

and which show give us “fred@home”, and not “null” (as in the case of result.user.email). If you want to see this in action, try:

For JavaScript, well done for building a new world of software … a faster one … a more interactive one … and removing ourselves from a world of Microsoft operating systems and (often) servers.

Written by

Professor of Cryptography. Serial innovator. Believer in fairness, justice & freedom. EU Citizen. Auld Reekie native. Old World Breaker. New World Creator.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store