AngularJS does not show JSON child

Question

I am facing an issue with angularJS, basically I trying to print the "img" child of below, but it does not print anything and does not even show an error. I have followed many tutorials of angularJS, but I am stuck at this point. Any ideas on what's can be wrong ?

Here is the angularJS code :

    app.controller("Deals", function($scope){
    $scope.getDeal = function() {
    [
    {
        "name":"Joe"
        "img":"https://i.ytimg.com/vi/NsvH9ye1ycU/mqdefault.jpg"

    }];}    
});

Calling from HTML :

<ion-content ng-controller="Deals">
<h6>{{getDeal.img}}</h6>
</ion-content>

The result is blank; however I am willing to get the url of that image.

Are you attempting to print the raw json as a string or simply iterating through its contents and printing them? — John F., Jan 02 '16 at 12:46

Arif · Answer 1 · 2016-01-02T12:52:01.147

0

The problem should be cause of square brackets. which means it needs ng-repeat. try this it should work

<ion-content ng-controller="Deals">
<h6 ng-repeat="deal in getDeal">{{deal.img}}</h6>
</ion-content>

also remove quotes from keys of object. like this:

$scope.getDeal = 
    [{
        name: "Joe",
        img: "https://i.ytimg.com/vi/NsvH9ye1ycU/mqdefault.jpg"

    }];

check codepen

edited Jan 02 '16 at 12:52

answered Jan 02 '16 at 12:42

Arif

1,617
9
18

If you remove the square brackets, it will not be an array anymore, and it will show an error. It does not work. – Zikooz Jan 02 '16 at 12:45
added codepen. u are doing something wrong for sure – Arif Jan 02 '16 at 12:52
It worked, but with removing " = function() " and I need that to pass variable in future... – Zikooz Jan 02 '16 at 12:53
It is perfectly valid to have quotes around key names. – John F. Jan 02 '16 at 13:02
Yeah it is, but i didnt find it useful in this particular case – Arif Jan 02 '16 at 13:04

score 0 · Answer 2 · answered Jan 02 '16 at 12:44

0

That is an Array which you are using, so when you use an Array you must use the array Index as Well. So the correct Code Will Be

`<ion-content ng-controller="Deals">
<h6>{{getDeal[0].img}}</h6>
</ion-content>`

answered Jan 02 '16 at 12:44

Karthic Rajakumar

86
7

Did you remove the quotes in the Angular code for key ? – Karthic Rajakumar Jan 02 '16 at 12:48

score 0 · Accepted Answer · edited May 23 '17 at 10:28

Ok, when you're repeating, you need to call the getDeal() function in the ng-repeat. Here's an example,

https://jsbin.com/tavapuyaki/edit?html,js,output

<div ng-repeat="deal in getDeal()">
  {{deal.name}} <img ng-src="deal.img"/>
</div>

Also, your function is not returning anything. You need something like this:

$scope.getDeal = function() {
return [
{
    "name":"Joe",
    "img":"https://i.ytimg.com/vi/NsvH9ye1ycU/mqdefault.jpg"

}];

};

However, I would advise against doing that and creating a property that stores the contents of the array.

For instance,

$scope.deals = [{name:'myname', img: 'blah.jpg'}];

Here is another SO answer explaining as to why using a function is not advised in an ng-repeat. How to Loop through items returned by a function with ng-repeat?

AngularJS does not show JSON child

3 Answers3