I am able to do something similar everywhere else, but not with checkboxes. What am I missing here?
My json looks like this:
{
"data": [
{
"id": 1,
"tags": [
"tag1",
"tag2"
],
...a bunch of other stuff...
},
{
"id": 2,
"tags": [
"tag1",
"tag2",
"tag3",
"tag4"
],
...a bunch of other stuff...
}
]
}
And my HTML (Angular) looks like this:
<div ng-repeat="tag in ::vm.media.tags track by $index">
<md-checkbox >
{{tag.tags}}
</md-checkbox>
</div>
I am having a hard time getting the actual text or name of the tags to show next to the checkbox. ALl I am getting is the checkboxes alone as the image shows below
Thanks in advance
You just need to use one more ng-repeat to iterate all the tags for each data item.
Here is the code.
<div ng-repeat="data in data.data" layout="column">
<span> ID: {{data.id}}</span>
<md-checkbox ng-repeat="eachTag in data.tags">
{{eachTag}}
</md-checkbox>
</div>
Here is the working Codepen.
Related
I am trying to iterate following json inside ng-repeat but not working. I would like to get both Ques and img. Below, I have tried "Ques" part but it doesn't display anything.
[{
"Ques": [{
"column1": "3",
"column2": "ok?"
}, {
"column1": "4",
"column2": "test"
}],
"img": [{
"column1": "21",
"column2": "CDH.PNG"
}, {
"column1": "22",
"column2": "Feedback.PNG"
}]
}]
My code given below
var messages = JSON.stringify(response.data);
$scope.messages = JSON.parse(messages);
<div class="list-group-item" ng-repeat="item in messages.Ques">
<h4 class="list-group-item-heading">{{item.column2}}</h4>
<p class="list-group-item-text">{{item.column1}}</p>
</div>
I have done this way. Its working. I can also use "Img" same like below.
<div class="list-group-item" ng-repeat="item in messages">
<div ng-repeat="items in item['Ques']">
<h4 class="list-group-item-heading">{{items.column2}}</h4>
<p class="list-group-item-text">{{items.column1}}</p>
</div>
</div>
I have a JSON object like the following:
{
"name": "cameraasd_main_autofocus",
"value": "Lasasd autofocus",
"displayName": "Autofocus"
},
{
"name": "screen_siasdze",
"value": "5.2\asd",
"displayName": "Sdascreen Size",
"group": "General"
},
{
"name": "camera_maindas_features",
"value": "Digital Zoom,das Auto Flash, Digital image stabilization"
"displayName": "Features"
},
In this data object I only want to target the element which have the group attribute with ng-repeat. And I have to further group out the elements with a particular group. For example from the whole object the elements with group value "General" should be separated from the rest of the elements.
You can create a scope variable to store the filtered items that have property "group" like below
var data = [{
"name": "cameraasd_main_autofocus",
"value": "Lasasd autofocus",
"displayName": "Autofocus"
},
{
"name": "screen_siasdze",
"value": "5.2asd",
"displayName": "Sdascreen Size",
"group": "General"
},
{
"name": "camera_maindas_features",
"value": "Digital Zoom,das Auto Flash, Digital image stabilization",
"displayName": "Features"
}];
$scope.filteredData = data.filter(function(x){ return x.hasOwnProperty("group")});
and then use ng-repeat in UI
<ul>
<li ng-repeat="item in filteredData">
{{item.name}} || {{item.value}}
</li>
</ul>
Here is a working sample : https://jsfiddle.net/Lt7aP/8267/
Edit : if you want to separate out the elements based on a particular group name then you can try the below code
$scope.filteredData = data.filter(function(x){ return x.hasOwnProperty("group") && x.group == "General"});
in this case only General groups will be displayed.
<div ng-repeat="x in records">
<div ng-if="x.group"> {{x.name}} </div>
</div>
try out if this works!! Good Luck!
Supposing your JSON contains an array (which is not show in your json but i assume it's there).
First, parse your JSON to a JsonObject, then get it as an array
JSONArray jsonArray = new JSONArray(jsonString);
Then you can do this in your html
<div ng-repeat="elem in jsonArray">
<a ng-if="elem.group">{{ elem.property }}</a>
</div>
Check this code.
<div>
<h3>With Group</h3>
<div ng-repeat="d in data">
<div ng-if="d.group">
{{d.name}}
</div>
</div>
</div>
<div>
<h3>Without Group</h3>
<div ng-repeat="d in data">
<div ng-if="!d.group">
{{d.name}}
</div>
</div>
</div>
I want to loop through an array of objects, which is in my json file.
Json
[
{
"name": "Mike",
"colors": [
{"name": "blue"},
{"name": "white"}
]
},
{
"name": "Phoebe",
"colors": [
{"name": "red"},
{"name": "yellow"}
]
}
]
html
<div *ngFor="let person of persons">
<p>{{person.name}}</p> <!-- this works fine-->
<p *ngFor="let color of person.colors"> <!--I want to list the colors of the person here-->
{{color.name}}
</p>
</div>
I cant access the colors array of a person. How do I achieve that?
I've already looked at these posts but the solutions of them couldn't help me:
Angular2 ngFor Iterating over JSON
Angular2 - *ngFor / loop through json object with array
For Angular 6.1+ , you can use default pipe keyvalue ( Do review also ) :
<ul>
<li *ngFor="let recipient of map | keyvalue">
{{recipient.key}} --> {{recipient.value}}
</li>
</ul>
WORKING DEMO
Previously : As you are saying :
Angular2 - *ngFor / loop through json object with array , this couldn't help you
You dont have any need of that, coz your code works fine , please check
WORKING DEMO
Your code (the part you shown) works fine (see the plunker linked below).
As the only thing not shown in your question is the way you assign your Javascript Object to the variable persons, I urge you to show you more code / search the issue there.
https://plnkr.co/edit/rj4K2sKHTHsVtdt4OWfC?p=preview
#Component({
selector: 'my-app',
template: `
<div>
<div *ngFor="let person of persons">
<p>{{person.name}}</p> <!-- this works fine-->
<p *ngFor="let color of person.colors"> <!--I want to list the colors of the person here-->
{{color.name}}
</p>
</div>
</div>
`,
})
export class App {
name:string;
constructor() {
}
persons = [
{
"name": "Mike",
"colors": [
{"name": "blue"},
{"name": "white"}
]
},
{
"name": "Phoebe",
"colors": [
{"name": "red"},
{"name": "yellow"}
]
}
];
}
I am having a tough time with ng-repeat using Angular.
My JSON data looks like this
{
"shows": {
"stations": {
"balaton": [{
"name": "Minimal",
"artist": "Sven Tasnadi",
"duration" : "1H"
}, {
"name": "Forest of Love",
"artist": "Bas Ibelini",
"duration" : "2H"
}, {
"name": "Sound of Underground",
"artist": "Potential Badboy",
"duration" : "2H30"
}],
"djradio": [{
"name": "Strickly Electronica",
"artist": "Culptrate",
"duration" : "1H"
}, {
"name": "Sound of Underground",
"artist": "Potential Badboy",
"duration" : "2H"
}, {
"name": "Sound Time",
"artist": "Leona Graham",
"duration" : "2H30"
}]
}
}
}
In my controller, I set the object to a scope.
$http.get('json/show-schedule.json').success(function(res){
$scope.schedule = res.shows.stations;
});
In my HTML,
<div class="schedule-station" ng-repeat="item in schedule">
<div class="schedule-station-logo" style="background-image:url('img/stations/{{balaton}}.png')"></div>
<ul>
<li class="schedule-duration-{{item.duration}}">
<span class="schedule-time">11PM</span>
<span>{{item.name}}</span>
<i><span>{{item.artist}}</span></i>
</li>
</ul>
</div>
Basically, I have a DIV that needs to be created based on how many stations there are in the JSON. Then, I need to get the station name, which is 'Balaton', and 'DJRADIO', this should be placed in my background-image such as balaton.png.
Then the List Item should be repeated based on how many tracks there in that particular station.
I am having a tough time figuring out how to do this, and my attempts are obviously way off.
Try something like this:
<div class="schedule-station" ng-repeat="(station, tracks) in schedule">
<h2>{{station}}</h2>
<div class="schedule-station-logo" style="background-image:url('img/stations/{{station}}.png')"></div>
<ul>
<li ng-repeat="track in tracks" class="schedule-duration-{{item.duration}}">
<span class="schedule-time">11PM</span>
<span>{{track.name}}</span>
<i><span>{{track.artist}}</span></i>
<b>{{track.duration}}</b>
</li>
</ul>
</div>
Check the demo fiddle
So there are a few things to consider here:
1) You have an object containing the stations, where it's a key, val set of items, where the values of the station property is an array of the songs. If the stations were an array, then you could do something like stations.length, but because it's a set of object properties, we need to count them manually, hence the angular.forEach.
$scope.schedule = data.shows.stations;
$scope.stationCount = 0;
angular.forEach($scope.schedule, function(station){
$scope.stationCount++;
});
2) To place each of the songs, we have to nest another ng-repeat so that we can iterate over each of the songs in the array.
3) The ng-repeat on the outside has to be setup for an object, and not an array, as you have in your original html.
I made a plnkr showing how to do everything for you: http://plnkr.co/edit/ca8WxSEvn00rYVfwN82r?p=preview
See ngRepeat documentation
It is possible to get ngRepeat to iterate over the properties of an
object using the following syntax: <div ng-repeat="(key, value) in myObj"> ... </div>
So to you should be able to iterate your collection like this:
<div class="schedule-station" ng-repeat="(stationName, songs) in schedule">
<div class="schedule-station-logo" style="background-image:url('img/stations/{{stationName}}.ng')"></div>
<ul>
<li ng-repeat="item in songs" class="schedule-duration-{{item.duration}}">
<span class="schedule-time">11PM</span>
<span>{{item.name}}</span>
<i><span>{{item.artist}}</span></i>
</li>
</ul>
</div>
I have a json which I'll be using to generate some html displaying tabs and buttons.
A simplified version of my json is this:
[{"id": "A","buttons":[{"id":"A1"},{"id":"A2"}]},
{"id": "B","buttons":[{"id":"B1"},{"id":"B2"}]}]
which I store in $scope.navigation as it is.
And, ideally I'd like to generate something like this:
<span id="tabs">
<div>A</div>
<div>B</div>
</span>
<span id="buttons">
<div>A1</div>
<div>A2</div>
<div>B1</div>
<div>B2</div>
</span>
What I tried is this
<span id="tabs">
<div ng-repeat="tab in navigation">{{tab.id}}</div>
</span>
<span id="buttons">
<span ng-repeat="tab in navigation">
<div ng-repeat="button in tab.buttons">{{button.id}}</div>
</span>
</span>
Of course this does not work as it creates an extra span element which separates the buttons depending to the tab they belong to.
Is there a way to do what I need?
Thanks!
What's the purpose of it? A < div> inside a < span> is considered bad practice and I'd advise you to change your CSS if appropriate. There may be a good reasoning for it though, but this question doesn't give enough details for an answer.
And coming to your above problem it can be achieved by creating another array consists of buttons like below.
$scope.navigation= [{ "id": "A", "buttons": [{ "id": "A1" }, { "id": "A2" }] },
{ "id": "B", "buttons": [{ "id": "B1" }, { "id": "B2" }] }];
$scope.buttons = [];
angular.forEach($scope.navigation, function (tab) {
angular.forEach(tab.buttons, function (button) {
$scope.buttons.push(button);
});
});
and finally use the ng-repeat like below.
<div> <div data-ng-repeat="button in buttons">{{button.id}}</div> </div>
You have to do a (key, value) repeat after the initial repeat in the span:
<span id="buttons" ng-repeat="i in buttons">
<div>{{i.id}}</div>
</span>
$scope.data = [{"id": "A","buttons":[{"id":"A1"},{"id":"A2"}]},
{"id": "B","buttons":[{"id":"B1"},{"id":"B2"}]}]
$scope.getButtons = function() {
$scope.buttons = []
for (var i = 0; i < $scope.data.length; i++) {
for(var x = 0; x < $scope.data[i].buttons.length; x++) {
$scope.buttons.push($scope.data[i].buttons[x])
}
}
console.log($scope.buttons)
}
$scope.getButtons();
I updated the plunker so that it flattens the buttons arrays all into one new array.
Plunker Demo