Is there any way to know that an object exist or not in HTML. I have an object like this.

$scope.object = {name : 'usman', profession : 'developer'}

Now i want to know in Html if the object exist or not or does the object contain only a text like this .

$scope.object = "Usman";

Now there are my conditions.

    <div ng-if="object">
    <p>Object exist and have attributes</p>
    </div>

    <div ng-if="object">
    <p>object contain only string no attributes exist</p>
   </div>

I want to write a bine condition like this - that if the object has no attributes and contains only string then show the div.

Here it is .

 <div ng-show="!objecthasnoattributes and objectOnlyContainsString">
<p>show this </p>
    </div>

Now how can I do this ?

Is there any way to know that an object exist or not in HTML. I have an object like this.

$scope.object = {name : 'usman', profession : 'developer'}

Now i want to know in Html if the object exist or not or does the object contain only a text like this .

$scope.object = "Usman";

Now there are my conditions.

    <div ng-if="object">
    <p>Object exist and have attributes</p>
    </div>

    <div ng-if="object">
    <p>object contain only string no attributes exist</p>
   </div>

I want to write a bine condition like this - that if the object has no attributes and contains only string then show the div.

Here it is .

 <div ng-show="!objecthasnoattributes and objectOnlyContainsString">
<p>show this </p>
    </div>

Now how can I do this ?

• javascript
• angularjs

4 Answers 4

It can be more short with a single method:

HTML:

<div ng-if="isObject()">
  <p>Object exist and have attributes</p>
</div>

<div ng-if="!isObject()">
  <p>object contain only string no attributes exist</p>
</div>

Controller:

$scope.isObject = function() {
  return typeof($scope.object) === 'object';
}

UPDATED:

If you want only string to be displayed,

$scope.isString = function() {
  return typeof($scope.object) === 'string';
}

Then you need only one html:

<div ng-if="isString()">
  <p>Show this</p>
</div>

Here is a changed plunk

You can write as below.

<div ng-if="object !== undefined"> </div>

And to check type of var is OBJECT or STRING... you can do as follow.

    $scope.object = {
        name: 'usman',
        profession: 'developer'
    };

    $scope.myString = "Usman";

    $scope.isString = function(val) {
        return typeof val === 'string';
    }
    $scope.isObject = function(val) {
        return typeof val === 'object';
    }

Then check as below for types.

    <div ng-if="object !== undefined && isObject(object)">
        <p>Object Value </p>
    </div>
    <div ng-if="myString !== undefined && isString(myString)">
        <p>String value</p>
    </div>

Ask for more queries

Thanks

You can make much easy way.

$scope.object = {name : 'usman', profession : 'developer'};

$scope.getBType = function(test){
  return( typeof test);
}

<div ng-if="getBType(object)=='object' && getBType(object.name)=='string'">
<p> Show this</p>
</div>

If you are certain that the input object will be of following types only.

$scope.object = {name : 'usman', profession : 'developer'};

$scope.object = "Usman";

The you can simply use:

<div ng-if="object && object.name">
    <p>Object exist and have attributes</p>
</div>

<div ng-if="object && !object.name">
    <p>object contain only string no attributes exist</p>
</div>

Only if the object exists and has name property, the condition #1 will be met.