I'm having trouble accessing the artists array within the items array here to be able to render the name field:
I'm currently able to grab other values at the same level as the artists that are simple objects. How can I loop through the array of the nested array?
Controller
$scope.search = "";
$scope.listLimit = "10";
$scope.selectedSongs = [];
$scope.addItem = function(song){
$scope.selectedSongs.push(song);
}
function fetch() {
$http.get("https://api.spotify.com/v1/search?q=" + $scope.search + "&type=track&limit=50")
.then(function(response) {
console.log(response.data.tracks.items);
$scope.isTheDataLoaded = true;
$scope.details = response.data.tracks.items;
});
}
Template
<div class="col-md-4">
<div class="playlist">
<h3>Top 10 Playlist</h3>
<ul class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
<li><b>{{song.name}}</b></li>
<li>{{song.artists.name}}</li>
<li contenteditable='true'>Click to add note</li>
<li contenteditable='true'>Click to add url for image</li>
</ul>
<div id="result"></div>
</div>
</div>
You should do another ng-repeat to access the artists,
<div class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
<ul ng-repeat="artist in song.artists">
<li><b>{{song.name}}</b></li>
<li>{{artist.name}}</li>
<li contenteditable='true'>Click to add note</li>
<li contenteditable='true'>Click to add url for image</li>
</ul>
</div>
Related
When I am using ng-repeats in ul's and li's I am getting the errors.
Here is my html code:
<ul>
<li ng-repeat="(key, value) in (myData | groupBy: 'id')">
{{key}}
<ul>
<li ng-repeat="details in value">
{{details.name}}
</li>
</ul>
</li>
</ul>
JS code:
.filter('groupBy', function () {
return function (data, key) {
var result = {};
for (var i = 0; i < data.length; i++) {
if (!result[data[i][key]])
result[data[i][key]] = [];
result[data[i][key]].push(data[i])
}
alert(JSON.stringify(result));
return result;
};
});
These are the errors I am getting
Try to put track by $index in the ng-repeat like this:
<ul>
<li ng-repeat="(key, value) in myData track by id">
{{key}}
<ul>
<li ng-repeat="details in value">
{{details.name}}
</li>
</ul>
</li>
</ul>
You can also track by $index if you have duplicates in array
<li ng-repeat="(key, value) in myData track by $index">
The infinite digest is caused by the filter that returns a new result every time it runs through the function. You'll have to rewrite the function so that it directly modifies the original data argument and you return the data argument again.
This is my controller
var i;
for (i = 1; i <= 3; i++ ) {
$scope["items"+i].push({
notification: item.notification,
admin_id: item.admin_id,
user_id: item.user_id,
chat_time: item.chat_time
})
}
This is my static scope in ng-repeat
<ul>
<li ng-repeat="x in items1"></li>
<li ng-repeat="x in items2"></li>
<li ng-repeat="x in items3"></li>
</ul>
How to make dynamic iteration scope variabel in ng-repeat in single ng-repeat like this
<ul>
<li ng-repeat="x in items[i++]">
<!-- generate from here-->
<li ng-repeat="x in items1"></li>
<li ng-repeat="x in items2"></li>
<li ng-repeat="x in items3"></li>
<!-- to here -->
</li>
</ul>
and it will display like my static scope
Thanks , appreciate ur help and comment
You need to store all the different arrays in a new Array and then, you can loop it around as shown (I have created a sample):
JS:
$scope.item1 = [ /* json array 1 */];
$scope.item2 = [ /* json array 2 */];
$scope.item3 = [ /* json array 3 */];
$scope.itemsList = [];
for (i = 0; i < 3; i++) {
var varName = '$scope.item' + (i + 1);
$scope.itemsList.push(eval(varName));
}
HTML:
<li ng-repeat="mainList in itemsList">
<p ng-repeat="specificList in mainList">
<span>Id: {{specificList.id}}</span>
<br />
<span>Name: {{specificList.name}}</span>
</p>
</li>
Have a look at the demo.
I have added 2 filters like uppercase and lowercase for list, data is not displaying . If apply only lowercase or uppercase data is displaying.
Please check the code below and please let me know where is the issue.
<div ng-app="myApp1" ng-controller="ctrl1">
<ul >
<li ng-repeat="x in names | orderBy:'name'">
{{x.name | lowercase +' , '+x.country | uppercase }}
</li>
</ul>
</div>
<script>
var app1= angular.module("myApp1",[]);
app1.controller("ctrl1", function($scope){
$scope.names=[{name:"ravi", country:"india"},{name:"kavitha",country:"india"},
{name:"Jo", country:"UK"},{name:"Hasi", country:"USA"},
{name:"Raj", country:"London"},{name:"Kal", country:"USA"}];
});
</script>
Here list is not populating, if have both uppercase and lowercase filters.
You should write a custom filter instead, if you're gonna be doing something more complex than what's out of the box...
angular.module("MyApp", []).filter("myFilterName", function() {
return function(input) {
if(!input) return "";
else
return input.name.toLower() + input.country.toUpper();
}
});
HTML:
<div ng-repeat="thing in things">
{{ thing | myFilterName }}
</div>
Try this:
angular.module('YourModule').filter('personLocationDisplay', function() {
return function(person) {
return (person.name.toLowerCase() + ', ' + person.country).toUpperCase();
};
});
And you can use it like:
<ul>
<li ng-repeat="x in names | orderBy:'name'">
{{x | personLocationDisplay }}
</li>
</ul>
I'm using the ng-repeat to list all the products, and I want to print out a star symbol x times depending on the product.rating. So, the code looks like following:
<p class="bs-rating"><i class="fa fa-star" ng-repeat="i in getRating({{ product.rating }}) track by $index"></i></p>
However, it parsed the product.rating as a String: Error: [$parse:syntax] http://errors.angularjs.org/1.3.0-beta.8/$parse/syntax?p0=product.rating&p1=is
I have tried to remove the curly brackets, {{ }}:
<p class="bs-rating"><i class="fa fa-star" ng-repeat="i in getRating(product.rating) track by $index"></i></p>
It gave me undefined. My getRating() is declared as following:
$scope.getRating = function(rating){
return new Array(parseInt(rating));
}
Could you help me figure it out how to pass a variable to ng tag?
The problem is on getRating function ie on generating the array.
I have developed an alternative solution on this link rating using ng-repeat #jsfiddle
<div ng-app="myApp" ng-controller="myCtrl">
<ol>
<li ng-repeat="product in products">
{{product.name}}
(
<span style="font-weight:bold" ng-repeat="i in
getRating(product.rating)">
x
</span>
)
</li>
</ol>
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope){
$scope.products = [
{name : "product1", rating:3},
{name : "product2", rating:5},
{name : "product3", rating:1}
];
$scope.getRating = function(rating){
var ratingArray = [];
for (var i = 1; i <= rating; i++) {
ratingArray.push(i);
}
return ratingArray;
};
});
Hopefully it will help.
Cheers
I'd like to access to the parameters of the next item on screen when clicking on a button.
I use a ng-repeat in my html file:
<li ng-repeat="item in items | filter:query" ng-show="isSelected($index)">
<img src="xxx.jpg" />
</li>
And the index in my Controller with a loop:
$scope.itemNext = function () {
$scope._Index = ($scope._Index < $scope.nbItems - 1) ? ++$scope._Index : 0;
$scope.functionToCallWithNextItem(nextItem.param1);
};
A simple $scope.items[$scope._Index].param1 instead of nextItem.param1 wouldn't work as the data is filtered so $index+1 from $scope.items isn't necessarily the good one.
Any idea ?
You can assign your filtered data to a variable:
<li ng-repeat="item in (filteredItems = (items | filter:query))">
Then use $index + 1 to get the next item:
<a ng-click="itemNext(filteredItems[$index + 1])">
Demo: http://plnkr.co/edit/OdL5rIxtTEHnQCC3g4LS?p=preview
It's simpy that
<div ng-repeat="item in items">
current: {{item.value}}
next: {{ items[$index + 1].value}}
previous: {{ items[$index - 1].value}}
</div>