Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Please let me know how to display the metrics, name, and nodes of the cluster using ng-repeat in a div.
Following is the JSON:-
[
{
"metrics":{
"groupMetric_2":"value2",
"groupMetric_1":"value1",
"groupMetric_0":"value0"
},
"name":"myGroup",
"clusters":[
{
"metrics":{
"cluster1_1":"value1",
"cluster1_0":"value0",
"cluster1_3":"value3",
"cluster1_2":"value2",
"cluster1_4":"value4"
},
"name":"cluster1",
"nodes":[
{
"metrics":{
"cluster1_node_1_0":"value0",
"cluster1_node_1_2":"value2",
"cluster1_node_1_1":"value1",
"cluster1_node_1_4":"value4",
"cluster1_node_1_3":"value3"
},
"name":"cluster1_node_1"
},
{
"metrics":{
"cluster1_node_2_1":"value1",
"cluster1_node_2_0":"value0",
"cluster1_node_2_3":"value3",
"cluster1_node_2_2":"value2",
"cluster1_node_2_4":"value4"
},
"name":"cluster1_node_2"
},
{
"metrics":{
"cluster1_node_3_0":"value0",
"cluster1_node_3_2":"value2",
"cluster1_node_3_1":"value1",
"cluster1_node_3_4":"value4",
"cluster1_node_3_3":"value3"
},
"name":"cluster1_node_3"
}
]
},
{
"metrics":{
"cluster2_0":"value0",
"cluster2_2":"value2",
"cluster2_1":"value1",
"cluster2_4":"value4",
"cluster2_3":"value3"
},
"name":"cluster2",
"nodes":[
{
"metrics":{
"cluster2_node_1_4":"value4",
"cluster2_node_1_2":"value2",
"cluster2_node_1_3":"value3",
"cluster2_node_1_0":"value0",
"cluster2_node_1_1":"value1"
},
"name":"cluster2_node_1"
},
{
"metrics":{
"cluster2_node_3_4":"value4",
"cluster2_node_3_2":"value2",
"cluster2_node_3_3":"value3",
"cluster2_node_3_0":"value0",
"cluster2_node_3_1":"value1"
},
"name":"cluster2_node_3"
},
{
"metrics":{
"cluster2_node_2_3":"value3",
"cluster2_node_2_4":"value4",
"cluster2_node_2_1":"value1",
"cluster2_node_2_2":"value2",
"cluster2_node_2_0":"value0"
},
"name":"cluster2_node_2"
}
]
}
]
}
]
Thanks.
You need to learn 2 things to achieve it :
1) How to access elements of Array.
You can access the array values by using the index number.
Example :
var myObj, x;
myObj = {
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
};
x = myObj.cars[0];
Check it here to learn more.
2) How to access properties of Object.
You can access the object values by using dot (.) notation:
Example :
myObj = { "name":"John", "age":30, "car":null };
x = myObj.name;
Check it here to learn more.
Finally, you'll be ready to learn the usage of ng-repeat in AngularJS :
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="x in records">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
</body>
</html>
Related
I am trying to fetch the long_name from the below JSON data using angular js but unable to fetch.
CODE:
{
"results" : [
{
"address_components" : [
{
"long_name" : "700109",
"short_name" : "700109",
"types" : [ "postal_code" ]
},
{
"long_name" : "Kolkata",
"short_name" : "Kolkata",
"types" : [ "locality", "political" ]
},
{
"long_name" : "West Bengal",
"short_name" : "WB",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "India",
"short_name" : "IN",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Kolkata, West Bengal 700109, India",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 22.6902065,
"lng" : 88.38850289999999
},
"southwest" : {
"lat" : 22.6715168,
"lng" : 88.35748319999999
}
},
"location" : {
"lat" : 22.6808046,
"lng" : 88.37577829999999
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 22.6902065,
"lng" : 88.38850289999999
},
"southwest" : {
"lat" : 22.6715168,
"lng" : 88.35748319999999
}
}
},
"place_id" : "ChIJ1-N4xFyc-DkRzfGq4MWZa1g",
"types" : [ "postal_code" ]
}
],
"status" : "OK"
}
I am using the following code to solve this problem but it does not show anything
CODE:
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="record in records">
{{record.long_name}}
</li>
</ul>
</div>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",function($scope,$http){
$http.get("https://maps.googleapis.com/maps/api/geocode/json?address=700109&key=AIzaSyDNK47S-6brePCvm1Hr6L7RFWAZvsngj1E")
// $http.get("https://www.styfash.com/post/data.json")
.then(function(result){
$scope.records=result.data.results.address_components;
});
});
</script>
Whenever I am trying to using $scope.records=result.data.results and printing {{record.address_components}} it is working properly but whenever I am trying to use the above-mentioned code it is not showing anything on the screen.
I am new to angular js.
Try
$scope.records=result.data.results[0].address_components;
What you should understand is, result.data.results is an array. Therefore you should traverse through that to obtain the child records. Check the code sample below.
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http) {
$http.get("https://maps.googleapis.com/maps/api/geocode/json?address=700109&key=AIzaSyDNK47S-6brePCvm1Hr6L7RFWAZvsngj1E")
.then(function(result){
$scope.records=result.data.results;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<ul>
<div ng-repeat="record in records">
<li ng-repeat="address in record.address_components">
{{address.long_name}}
</li>
</div>
</ul>
</div>
if you just need the first record, change this line in your code
$scope.records=result.data.results.address_components;
to this
$scope.records=result.data.results[0].address_components;
I'm trying to filter a nested array of objects with my own objects, by idSubject. But I'm not getting the right result.
I have articles (which have subjects)
And a array of objects (which are the subjects I want to filter the articles with)
Data looks like this:
So I'm trying to filter the array of articles by its subjects.
I tried the following:
<div class="panel panel-default"
ng-repeat="searchArticle in searchArticles | filter: {subjects: filterSubjects} as articleSearchResult">
So filterSubjects is the second screenshot and SearchArticles is the first screenshot.
Without much luck.
Hope you can help, please tell me if things are still unclear.
This custom filter will help you.
Example : http://plnkr.co/edit/jMizCLxPH6DtDA5wL15Q?p=preview
HTML:
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<h2>Select Subjects</h2>
<div ng-repeat="subject in subjects">
<label>
<input type="checkbox" ng-model="filterSubjects[subject.id]" ng-true-value="'{{subject.id}}'" ng-false-value="''">{{subject.name}}</label>
</div>
<h2>Filtered Articles</h2>
<div ng-repeat="searchArticle in searchArticles | subjectFilter:filterSubjects">{{searchArticle.name}}</div>
</div>
</body>
JS:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.searchArticles = [{
"name": "Article1",
"sid": "1"
}, {
"name": "Article2",
"sid": "1"
}, {
"name": "Article3",
"sid": "2"
}];
$scope.subjects = [{
"name": "Subject1",
"id": "1"
}, {
"name": "Subject2",
"id": "2"
}];
$scope.filterSubjects = [];
});
app.filter('subjectFilter', function() {
return function(articles, filterSubjects) {
filtered = articles.filter(function(e){return filterSubjects.indexOf(e.sid) >= 0},filterSubjects);
return filtered;
}
});
if you want to filter based on object :
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.searchArticles = [{
"name": "Article1",
"sid": "1"
}, {
"name": "Article2",
"sid": "1"
}, {
"name": "Article3",
"sid": "2"
}];
$scope.subjects = [{
"name": "Subject1",
"id": "1"
}, {
"name": "Subject2",
"id": "2"
}];
$scope.filterSubjects = [{
"name": "Subject1",
"id": "1"
}, {
"name": "Subject1",
"id": "2"
}];
});
app.filter('subjectFilter', function() {
return function(articles, filterSubjects) {
var sFiltered = [];
for (var i = 0; i < filterSubjects.length; i++) {
sFiltered.push(filterSubjects[i].id);
}
var filtered = articles.filter(function(e) {
return sFiltered.indexOf(e.sid) >= 0;
}, sFiltered);
return filtered;
}
});
I have an object, which has objects inside, and arrays in child objects. Here's the structure:
var keywords = {
"Animals" : {
"Pets" : [
"Guppy", "Parrot", "Goldfish", "Dog", "Cat"
],
"Wild animals" : [
"Tiger", "Ant", "Tetra", "Peafowl", "Mongoose"
],
"Domestic animals" : [
"Cow", "Pig", "Goat", "Horse"
]
},
"Food" : {
"Fast food" : [
"Cheeseburger", "Hamburger"
],
"Dessert" : [
"Chocolate", "Cookie", "Cake", "Pie"
]
},
"Vehicle" : {
"Motorcycle" : [
"Harley Davidson"
],
"Car" : [
"Lamborghini", "Ferrari", "Bugatti", "BMW", "Mercedes"
]
},
"Movie" : {
"Science fiction" : [
"Sunshine", "Interstellar", "The Moon", "Oblivion", "Star Trek", "Star Wars"
]
}
};
I've made a foreach loop for looping through the elements inside and print them on screen:
angular.forEach(keywords, function(value, key) {
console.log(key);
angular.forEach(value, function(value, key) {
console.log(key);
angular.forEach(value, function(value, key) {
console.log(value);
})
})
})
Now, I'm trying to do the same with ng-repeat directive on a div (that has a div in it, and another in the child div), but can't make it work, have no clue how to start it. Any idea?
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.keywords = {
"Animals": {
"Pets": [
"Guppy", "Parrot", "Goldfish", "Dog", "Cat"
],
"Wild animals": [
"Tiger", "Ant", "Tetra", "Peafowl", "Mongoose"
],
"Domestic animals": [
"Cow", "Pig", "Goat", "Horse"
]
},
"Food": {
"Fast food": [
"Cheeseburger", "Hamburger"
],
"Dessert": [
"Chocolate", "Cookie", "Cake", "Pie"
]
},
"Vehicle": {
"Motorcycle": [
"Harley Davidson"
],
"Car": [
"Lamborghini", "Ferrari", "Bugatti", "BMW", "Mercedes"
]
},
"Movie": {
"Science fiction": [
"Sunshine", "Interstellar", "The Moon", "Oblivion", "Star Trek", "Star Wars"
]
}
};
});
.section1{
background-color: CornflowerBlue;
}
.section2{
background-color: lightblue;
}
.section3{
background-color: Azure ;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="(keyword, list) in keywords" class="section1">
{{keyword}}
<div ng-repeat="(name, items) in list" class="section2">
{{name}}
<div ng-repeat="item in items" class="section3">
{{item}}
</div>
</div>
</div>
</body>
I think we are not using ng-repeat with this type of array.
You should go throw with this logic.
$scope.html ="";
angular.forEach(keywords, function(value, key) {
$scope.html += "<div>"+ key ;
angular.forEach(value, function(value, key) {
$scope.html += "<div>"+ key ;
angular.forEach(value, function(value, key) {
$scope.html += "<div>"+ key + "</div>";
})
$scope.html += "</div>";
})
$scope.html += "</div>";
})
and Print 'html' scope into your HTML page.
{{html}}
I know this is not perfect solution but it's trick to fix you current problem.
I am newbie to AngularJS. I have JSON file which I have to fetch using angularjs!
JSON File
{
"records": [
{
"students": [
{
"id": 1,
"name": "Bill",
},
{
"id": 2,
"name": "Steve",
}
],
"exstudent": [
{
"id": 1,
"name": "Woz",
},
{
"id": 2,
"name": "Jonathan",
}
]
}
]
}
Controller part snippet -
$http.get('json/somedata.json').success(function (data){
$scope.name = data.records.student.name;
$scope.exname = data.records.exstudent.name;
});
}])
HTML
<div class="panel-body" ng-repeat = "browse in name">
{{browse.student.name}}
</div>
Which part I am doing wrong? I think the problem is with ng-repeat!
Need Help
You can't use data.records.students.name as students is an Array.
You can however store its data into your $scope and use it in the ng-repeat:
$http.get('json/config.json').success(function (data){
$scope.students = data.records.students;
$scope.exstudents = data.records.exstudent;
});
Then in your HTML use the ng-repeat like this:
<div class="panel-body" ng-repeat="student in students">
{{student.name}}
</div>
hi i have a JSON like this:
pages[
{
"id": "74682309",
"labels": [
{
"term": "test1",
"probability": 0.069
},
{
"term": "test2",
"probability": 0.037
}
]
}];
and using tags-input i want the tags to read only the term and show the term so i can show and update.
i have
<tags-input ng-model="se.labels"></tags-input>
the 'se' comes from ng-repeat="se in searchCtrl.pages
Based on the documentation (http://mbenford.github.io/ngTagsInput/documentation/api) you can change the keyProperty and displayProperty to make it use "term" instead of "text"
I've created a fiddle to demonstrate how you can obtain the data needed, considering that the provided JSON is a valid JSON. Your JSON is invalid.
var myApp = angular.module('myApp',['ngTagsInput']);
myApp.factory('data', function() {
var data = [
{
"id": "74682309",
"labels": [
{
"text": "test1",
"probability": 0.069
},
{
"text": "test2",
"probability": 0.037
}
]
}];
return data;
});
myApp.controller('MyCtrl', ['$scope', 'data', function($scope, data) {
var values = [];
data.map(function(elem) {
return elem.labels.forEach(function(el) {
values.push({
"text" : el.text
});
});
});
$scope.tags = values;
}]);
And the html part:
<div ng-controller="MyCtrl">
<div class="elem">
<tags-input ng-model="tags"></tags-input>
</div>
</div>
Here is the fiddle:
http://jsfiddle.net/HB7LU/16554/
Update:
You haven't included the angular ng-tags-input extension as a tag into your question. Please see my updated fiddle:
http://jsfiddle.net/HB7LU/16557/