Develop Reference

How to use ng-repeat only if object type is array?

I have a complex object as shown below:
$scope.document =
{
"GENERAL_FIELDS": {
"Source_Type": "custom",
"Annotations": [
"216/content/Factiva_CM_001/Proteins",
"216/content/Factiva_CM_001/Fact"
],
"Content": [
" Baculovirus; Budded virus; Ultrastructure; Cryo-EM;"
],
"Title": [
"Budded baculovirus particle structure revisited"
]
},
"stn": {
"Document_Type": [
"Journal",
"Article"
]
}
}
I want to display all the fields present in "GENERAL_FIELDS" and "stn". Fields' value can either be string or array of strings. If it is array, I further want to ng-repeat on it and display the content. Following is my html:
<div id="titsec" class="comdocdet" ng-repeat="(category, group) in document">
<div ng-repeat="(key, value) in group">
<div class="pTitle">
{{key}}
</div>
<div class="contdesc">
<div ng-if="Array.isArray(value)">
<div ng-repeat="v in value">
{{v}}
</div>
</div>
<div ng-if="!Array.isArray(value)">
{{value}}
</div>
</div>
</div>
</div>
But ng-if="Array.isArray(value)" is never true and array fields are being displayed in object form: ["Journal","Article"]. What am I missing ?

Or add this in your controller and leave rest like it is.
$scope.isArray = angular.isArray;
html would be like this :
<div ng-if="isArray(value)">
<div ng-repeat="v in value">
{{v}}
</div>
</div>
<div ng-if="!isArray(value)">
{{value}}
</div>

Instead of accessing a method on the Array object directly in the template, you should do in your controller. So for example:
<div ng-if="vm.isValueAnArray(value)">
// Some html
</div>
Your controller:
function isValueAnArray(val) {
return Array.isArray(val);
}
I haven't tested it, but logic should be in the controller, not in the template.

This is an issue of Scoping
The scope of the template is relative to $scope in the controller, so when it looks for Array, it will look for that in the controller scope (e.g. $scope.Array).
One option is to use ng-if="window.Array.isArray(value)". See the working example below.
Another option is to set $scope.Array = Array.prototype in the controller. That way there is no need to reference window before calling Array.isArray().
Another option is to create an alias for Array.isArray() in the controller scope:
$scope.isValueAnArray = Array.isArray;
Then call that function to determine if the value is an array.
angular.module('ang', [])
.controller('cont', function($scope) {
//use this to avoid referencing window in the template
//$scope.Array = Array.prototype;
$scope.document = {
"GENERAL_FIELDS": {
"Source_Type": "custom",
"Annotations": [
"216/content/Factiva_CM_001/Proteins",
"216/content/Factiva_CM_001/Fact"
],
"Content": [
" Baculovirus; Budded virus; Ultrastructure; Cryo-EM;"
],
"Title": [
"Budded baculovirus particle structure revisited"
]
},
"stn": {
"Document_Type": [
"Journal",
"Article"
]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ang" ng-controller="cont">
<div id="titsec" class="comdocdet" ng-repeat="(category, group) in document">
<div ng-repeat="(key, value) in group">
<div class="pTitle">
{{key}}
</div>
<div class="contdesc">
<div ng-if="window.Array.isArray(value)">
<div ng-repeat="v in value">
{{v}}
</div>
</div>
<div ng-if="!window.Array.isArray(value)">
{{value}}
</div>
</div>
</div>
</div>
</div>

How to use ng-repeat in a nested json in an ionic project

I'm trying to use ng-repeat in a nested json object.
{
"title": "Important message 01",
"img": "any url image here",
"authorPhoto": "http://lorempixel.com/40/40/people/4/",
"author": "John Doe",
"datePosted": "1 day ago",
"thumbsUp": "245",
"thumbsDown": "200",
"commentsNum": "123",
"id": "1",
"comments": [
"comment",
{
"authorCommentPhoto": "http://lorempixel.com/40/40/people/5/",
"author": "Jimmy doe",
"text": "useless commment",
"dateCommented": "01/08/2016"
}
]
}
I can list the top level json (title, img, etc...), but I do know how to list the comments part
<ion-item ng-repeat="card in cards" href="#/app/playlists/{{card.id}}" class="card-wrapper">
<div class="card" style="background: url({{card.img}}); background-size:100%;">
<div class="inner-wrapper">
<img ng-src="{{card.authorPhoto}}" alt="Author profile photo">
<p class="author">{{card.author}} <br>
{{card.datePosted}}
</p>
<p class="essay">{{card.title}}</p>
<div class="footWrapper">
<div class="thumbsUp"><i class="icon ion-arrow-up-c"></i>{{card.thumbsUp}}</div>
<div class="comments">{{card.commentsNum}}</div>
<div class="thumbsDown"><i class="icon ion-arrow-down-c"></i>{{card.thumbsDown}}</div>
</div>
</div>
</div>
<div class="commentsWrapper">
<div class="head">
<img class="profilePhoto" src="http://tilomitra.com/wp-content/uploads/2014/08/avatar-cartoon.png" alt="avatar photo">
<input type="text" placeholder="Write a comment...">
</div>
<div class="commentsContainer">
<ul>
<li ng-repeat="comment in cards.comments">
{{comment.authorCommentPhoto}} <br>
{{comment.author}} <br>
{{comment.text}} <br>
{{comment.dateCommented}}
</li>
</ul>
</div>
</div>
</ion-item>
How can I solve this ?

The comments array has a string and an object. Remove the string "comments" and just use an array of objects. Then use ng-repeat="comment in card.comments"
{
"comments":[
{
"authorCommentPhoto": "http://lorempixel.com/40/40/people/5/",
"author": "Jimmy doe",
"text": "useless commment 1",
"dateCommented": "01/08/2016"
},
{
"authorCommentPhoto": "http://lorempixel.com/40/40/people/5/",
"author": "Jimmy doe",
"text": "useless commment 2",
"dateCommented": "01/09/2016"
}
]
}

angularJS: loop inside an ng-repeat

I'm trying to display data from a certain part of a string of JSON data.
Below is the part i want to display.
{
"-rank": "3",
"-teamId": "t3",
"-name": "Arsenal",
"-played": "31",
"-won": "17",
"-drawn": "7",
"-lost": "7",
"-for": "52",
"-against": "30",
"-points": "58",
"-goalDifference": "22"
Below is the JS.
$scope.leagueTable = $scope.myData.LeagueTable.Table.TeamPosition;
//League Table
for( var i = 0; i < $scope.leagueTable.length; i++) {
if($scope.leagueTable[i]['-teamId'] == "t3") {
$scope.arsenalStats = $scope.leagueTable[i];
break;
}
}
console.log($scope.arsenalStats);
And below is the HTML I am using. I just get blank results. no errors.
<div class="row" ng-repeat="val in leagueTable| limitTo:-1">
<div class="col">{{arsenalStats[$index]['-played']}}</div>
<div class="col">{{arsenalStats[$index]['-won']}}</div>
<div class="col">{{arsenalStats[$index]['-drawn']}}</div>
<div class="col">{{arsenalStats[$index]['-lost']}}</div>
<div class="col">{{arsenalStats[$index]['-points']}}</div>
</div>
Any ideas?

using leagueTable object, you should be using val.
<div class="row" ng-repeat="val in leagueTable| limitTo:-1">
<div class="col">{{val[$index]['-played']}}</div>
<div class="col">{{val[$index]['-won']}}</div>
<div class="col">{{val[$index]['-drawn']}}</div>
<div class="col">{{val[$index]['-lost']}}</div>
<div class="col">{{val[$index]['-points']}}</div>
</div>

ng-repeat disable my div

I for my stage have to modifie a web site for that i need angularjs i wanted to use the command ng-repeat to display some documentation but when i add ng-repeat in the div it "destroy" it and i cant figure out why...
So there is the code hope u can help me.
There is my js
App.controller('doccontroller', [ function(){
return {
scope: {},
restrict: 'A',
link: function ($scope){
$scope.docs = [
{
"id_section" : 0,
"description": "RANDOM STUFF",
"source": [
{
"python": "TEXTE",
"ruby": "TEXTE",
"javascript": "TEXTE"
}
]
},
{
"id_section" : 1,
"description": "RANDOM STUFF",
"source": [
{
"python": "TEXTE",
"ruby": "TEXTE",
"javascript": "TEXTE"
}
]
},
{
"id_section" : 2,
"description": "RANDOM STUFF",
"source": [
{
"python": "TEXTE",
"ruby": "TEXTE",
"javascript": "TEXTE"
}
]
}
]
}
}
}
])
`There is my route to "include" the controller
$routeProvider.when '/docs',
templateUrl : config.BaseHtml+'/Page/docs.html'
controller : 'doccontroller'
`
and to finish the html :)
<div id="api-docs">
<div id="methods">
<div class="languages">
<a class="language selected" data-lang="ruby" href="#">Ruby</a>
<a class="language" data-lang="python" href="#">Python</a>
<a class="language" data-lang="php" href="#">PHP</a>
</div>
<div>
<div class="method" id="intro">
<div class="method-section clearfix">
<div class="method-description" ng-repeat="doc in docs">
<h3>Introduction</h3>
<p>
{{doc.description}}
</p>
</div>
<div class="method-example">
<pre>
<code class="ruby"># All this code is just folololol
React.api_key = "In here goes your api key!"</code><code class="python"># All this code is just for demonstration purposes
react.api_key = "In here goes your api key!"</code><code class="php"># All this code is just for demonstration purposes
React::setApiKey("In here goes your api key!");</code>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
So to say it again, what i need to do is to fill create 1 div / id_section and to fill it with the
descrition for now.

Change:
ng-repeat="docs in docs"
to:
ng-repeat="doc in docs"
Also, in your code you have a call to {{ doc.des }}, which probably should be {{ doc.description }}

data-bind text not working

This is the part of the code which uses ko observableArray bindings. This code does not work.
<!-- ko foreach: environmentsList -->
<div data-bind="id: id">
<span data-bind="text: name">
</span>
<h3 data-bind="text: desc"></h3>
</div>
<!-- /ko -->
However this part works fine within my project. I feel both are the same. Is there any difference
<div id="2">
<span>Tab2</span>
<h3>desc2</h3>
</div>
I have a observable array in the view model
environmentsList: {
func: ko.observableArray
}
It refers to the following JSON data
{ "environments": [
{ "id": "dev",
"name": "Development",
"desc": "Development Environment Content"
},
{ "id": "test",
"name": "Testing",
"desc": "Testing Environment Content"
},
{ "id": "prod",
"name": "Production",
"desc": "Production Environment Content"
}]}

Rename environmentsList to environments ...
http://jsfiddle.net/3WE23/