- [Instructor] When you process data returned
from a call to a web service,
a useful first step is to check
whether any data has been returned.
A JSON string will generally contain some characters,
even if they're just the opening
and closing braces for an encoded object
or the brackets for an array.
So parsing is a common first step.
If you're using JavaScript though,
checking whether the object or array is empty
isn't as straightforward
as checking for empty data of some other types.
Unlike an empty string, for example,
which is falsy in JavaScript,
an empty object is truthy.
This means that a simple logical test,
like checking if the value is null
cannot distinguish between an empty object
and an object with content.
In a modern browser, you can use the Object.keys method
to generate an array of your object's keys
and then check if the length property
of the array is zero.
I've created a test file containing one empty object
called emptyObject, as well as an object containing
a key and a value called nonEmptyObject,
and additional variables containing data
of a few other data types:
string, number, array and date.
So I'm going to create a new function called testData.
And that's going to take a single parameter called data.
And I'm going to add the statement if,
and then in parens Object.keys parens data.length,
triple equals zero.
Then I'm going to console.log Empty Object, and a colon.
And I'm going to return the data.
And after the closing curly brace here,
I'm going to say else,
and I'm going to console.log Not an Empty Object.
And a colon.
And I'm going to return the data.
Now, note that this code may behave unpredictably
if it's passed data that's not an object.
And in particular, a date object
would have a zero length here,
so it would pass for an empty object
and I might skip parsing actual data.
Now, to account for this,
I'm going to update my condition.
So after, oh and I realized I spelled this wrong.
It should be Object.keys plural.
So after Object.keys data.length equals zero,
I'm going to do an and and
and I'm going to use data.constructor
triple equals Object,
and that would be false for a data object
because that's constructed from the date constructor.
So in theory, this function should be able
to take each of my pieces of data
and tell me whether they are an empty object
or not an empty object.
So I'm going to save my work here.
I'm going to go ahead, and this is an HTML file.
So I'm going to use my HTTP server, open this in my browser.
I'm going to open my console.
And then I'm going to test my variables.
So I'm going to run testData.
And I'm going to pass it emptyObject.
And it is an empty object.
It's been identified as an empty object.
And so let me go ahead and do that again.
But I'm going to test that against my nonEmptyObject.
And that's identified as not an empty object.
And let's try with the date variable.
So that's dateContent.
And that's also not an empty object.
Now, where things get a bit more complicated
is older browser support.
And specifically, if we look at the compatibility table
for Object.keys, we can see that older versions
of some browsers don't support the Object.keys method.
For instance, older versions of Internet Explorer.
Now, I can write a more robust test
using the hasOwnProperty method of the object.
And if I look at the compatibility for that method,
I can see it supports even older versions
of Internet Explorer,
as well as a number of these other browsers,
like Chrome and Firefox.
It goes back to version one.
So we have really, really solid support here
for any older browsers that might be in my user base.
So I'll go back to my function,
and I'm going to comment out this code
that works in modern browsers,
and I'm going to start with a for in statement.
So I'm going to do for prop in data.
And within the for statement,
I'll add an if statement, and I'm going to test
whether hasOwnProperty triple equals true.
And that's checking for the current property.
And if that's the case,
I'm going to console.log Not an Empty Object.
And I will return data.
Then I need to account for both empty objects
that pass through the for in statement
and non object data that skips the for in statement.
So after this, I'll create an if-else construction.
And this statement is going to check if JSON.stringify
data is the same as triple equals JSON.stringify
an empty object.
And if that's the case,
I'm going to console.log Empty Object,
and I'm going to return data.
Else I'm simply going to console.log
Not an Empty Object,
and return the data.
So I'll save my work here
and I'll go back to my browser.
And I'm going to run tests again.
So I'm going to call that same function.
testData, and pass it emptyObject
and that is found to be an empty object.
And running it
with a nonEmptyObject is not an empty object.
And testData with a dateContent
is not an empty object.
And if I run it against the other data types,
I'm going to see that those are also not seen
as empty objects.
And so I can use a function like this
to test for an empty object.
So this is going to be able to tell me
whether I have data coming in
in response to an API request.