I need some guidance on how to access this key of a JSON object using angular 2.
I tried
{{news._embedded["wp:featuredmedia"][0].id}}
but it tells me that cannot read property '0'
[
{
"_embedded": {
"wp:featuredmedia": [
{
"id": 7240
}
]
}
}
]
In my template:
<ion-card *ngFor="let news of newsObj">
{{news._embedded["wp:featuredmedia"][0].id}}
</ion-card>
Use obj['key'] to use such keys.
angular.module('app', [])
.controller('ctrl', function($scope){
$scope.obj = [
{
"_embedded": {
"wp:featuredmedia": [
{
"id": 7240
}
]
}
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table style='border:1px solid black'>
<tr ng-repeat="n in obj">
<td>{{n._embedded['wp:featuredmedia'][0]['id']}}<td>
<tr>
</table>
</div>
Related
I am trying to show nested data from JSON in a table but not getting succeeded.
My json data:-
$scope.data = [
{
"$id": "1",
"Folder": [
{
"Name": "Windows-Desktop",
"CPU": "2",
"RAM": 2,
"FolderName": "Folder-28"
},
{
"Name": "Desktop",
"CPU": "1",
"RAM": 1,
"FolderName": "Folder-11"
}
]
}
]
I tried this in controller:-
$scope.Folder = [];
angular.forEach($scope.data.Folder, function(choose) {
$scope.Folder.push(choose);
}
In view I did this
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" ng-repeat="g in Folder">{{g.Name}}</td>
<td>
<div ng-repeat="g in Folder">
<input class="form-control" type="text">{{g.CPU}}</input>
</div>
</td>
<td>
<div ng-repeat="g in Folder">
<input class="form-control" type="text">{{g.RAM}}</input>
</div>
</td>
</tr>
</tbody>
I am not getting any output in this. Where am I going wrong?
You are accessing $scope.data.Folder which is not correct because $scope.data is an Array.
First try to loop on $scope.data and then a loop on Folder
$scope.Folder = [];
angular.forEach($scope.data, function(choose) {
if(choose && choose.Folder && choose.Folder.length) {
angular.forEach(choose.Folder, function(choose1) {
$scope.Folder.push(choose1);
}
}
}
In your controller do like this:
$scope.Folder = [];
angular.forEach($scope.data, function(choose) {
if(choose && choose.Folder){
$scope.Folder.push(choose.Folder);
}
})
You need to use $scope.data[0].Folder in your controller as $scope.data is a array type. And I am not sure how you are rendering your table but as the question is only related to getting the value in $scope.Folder this is your solution.
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.data = [
{
"$id": "1",
"Folder": [
{
"Name": "Windows-Desktop",
"CPU": "2",
"RAM": 2,
"FolderName": "Folder-28"
},
{
"Name": "Desktop",
"CPU": "1",
"RAM": 1,
"FolderName": "Folder-11"
}
]
}
];
$scope.Folder = [];
angular.forEach($scope.data[0].Folder, function(choose) {
$scope.Folder.push(choose);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" ng-repeat="g in Folder">{{g.Name}}</td>
<td>
<div ng-repeat="g in Folder">
<input class="form-control" type="text" />{{g.CPU}}
</div>
</td>
<td>
<div ng-repeat="g in Folder">
<input class="form-control" type="text" />{{g.RAM}}
</div>
</td>
</tr>
</tbody>
</div>
Here is one more example that I think is something you are expecting
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.data = [
{
"$id": "1",
"Folder": [
{
"Name": "Windows-Desktop",
"CPU": "2",
"RAM": 2,
"FolderName": "Folder-28"
},
{
"Name": "Desktop",
"CPU": "1",
"RAM": 1,
"FolderName": "Folder-11"
}
]
}
];
$scope.Folder = [];
angular.forEach($scope.data[0].Folder, function(choose) {
$scope.Folder.push(choose);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table border='1'>
<tr>
<th>Name</th>
<th>CPU</th>
<th>RAM</th>
</tr>
<tr ng-repeat = "g in Folder">
<td>{{g['Name']}}</td>
<td>{{g['CPU']}}</td>
<td>{{g['RAM']}}</td>
</tr>
</table>
</div>
You can try the following
<div ng-repeat="item in data">
<div ng-repeat="g in item.Folder">
Name:{{g.Name}}-
Cpu:{{g.CPU}}-
Ram:{{g.RAM}}
</div>
</div>
using above method would eliminate the need of preparing data in your controller
Demo
Table Demo
All you need to do is update your iterator function
from
angular.forEach($scope.data.Folder, function(choose)
to
angular.forEach($scope.data[0].Folder, function(choose)
look at your json Folder is first element....
I am using single page angular application. I have defined the static array in my typescript file. I want to bind my value from my Address array to the dropdown(select control). My ts file is as follows.
let mainAngularModule = angular.module("mm", ['ngMaterial', 'ngRoute']);
mainAngularModule.config(routeConfig);
routeConfig.$inject = ['$routeProvider'];
function routeConfig($routeProvider, $locationProvider) {
$routeProvider
.when('/UserDefinedElement', {
templateUrl: 'LinkType.html',
controller: 'linktController as LTController'
})
.when('/PersonalPreferences', {
templateUrl: 'PersonalPreference.html',
controller: 'personalpreferencesController as PPController'
})
}
and i have defined the class in same ts file which is as follows
class LinkTypeController {
constructor() {
$scope.items = [
{ Name: "LinkType1", Address: "NC"},
{ Name: "LinkType2", Address: "NY"}
];
this.AddressData= [
{ ID: 1, description: "NY" },
{ ID: 2, description: "NC" },
{ ID: 3, description: "SC" },
];
}
}
mainAngularModule.controller("linktController", LinkTypeController);
my Linktype HTML code is as follows
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div class="demo-md-panel-content">
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{x.Name}}</td>
<td>
<md-select ng-model="selectedAddress" ng-model-options="{trackBy:'$value.ID'}">
<md-option ng-value="address" ng-repeat="address in LTController.AddressData track by $index">{{ address.description }}</md-option>
</md-select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
when my page is loaded i want values from my address arrays to be selected in dropdown. Is something i am missing?
<md-select ng-model="x.Address">
<md-option ng-value="address.description" ng-repeat="address in LTController.AddressData track by $index">{{ address.description }}</md-option>
</md-select>
Your ng-model needs to be bound to x.Address which is where the data comes from.
ng-model-options - trackBy needs to be removed because we are doing shallow comparison on string only.
ng-value on option needs to be address.description because this is the field to be matched against x.Address.
I've included a simple example. I'm not familiar with typescript so I've written using vanilla JS.
angular.module('test', ['ngMaterial']).controller('TestController', TestController);
function TestController($scope) {
$scope.items = [
{ Name: "LinkType1", Address: "NC"},
{ Name: "LinkType2", Address: "NY"}
];
$scope.AddressData = [
{ ID: 1, description: "NY" },
{ ID: 2, description: "NC" },
{ ID: 3, description: "SC" },
];
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
<div ng-app='test' ng-controller='TestController'>
<div ng-repeat='x in items'>
<div>Name: {{x.Name}}</div>
<div>
<md-select ng-model='x.Address' aria-label='address'>
<md-option ng-value='address.description' ng-repeat='address in AddressData'>{{address.description}}</md-option>
</md-select>
</div>
</div>
</div>
{
"data": {
"name": "NAME",
"tests": [
{
"testname": "abc",
"relatedResource": [
{
"accessType": "fttb",
},
{
"accessType": "fttn",
}
]
},
{
"testname": "xyz",
"relatedResource": [
{
"accessType": "fttp",
},
{
"accessType": "fttp",
}
]
}
]
}
}
Controller
$scope.data=response.data.tests;
<div ng-repeat="l in data">
<div ng-repeat="i in l.relatedResource">
{{i.accessType}}
</div>
</div>
try this, you need multiple ng-repeat to access relatedResource
here I printed the output
<div ng-controller="MyCtrl">
<div ng-repeat="(key,val) in data">
{{val.name}}
<div ng-repeat="test in val.tests">
- {{test.testname}}
<div ng-repeat="resource in test.relatedResource">
- -{{resource.accessType}}
</div>
</div>
</div>
</div>
Try this snippet
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = {
"data": {
"name": "NAME",
"tests": [
{
"testname": "abc",
"relatedResource": [
{
"accessType": "fttb",
},
{
"accessType": "fttn",
}
]
},
{
"testname": "xyz",
"relatedResource": [
{
"accessType": "fttp",
},
{
"accessType": "fttp",
}
]
}
]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="obj in data">
<span ng-repeat="val in obj.tests">
{{val.testname}}
<span ng-repeat="v in val.relatedResource">
{{v.accessType}}
</span>
<br/>
</span>
</div>
</div>
There is actually not much information about the question.
If you receive the json-data from a remote server, you should always check and convert it to a real json-object.
You can simply use
$scope.data = response.data.tests;
$scope.getData = function()
{
return angular.toJson($scope.data);
}
or you can test it with:
{{data | json}}
I am looking a solution for dynamic data structure(inconsistent like different property name and property length) with ng-repeat. sample code are below.
$scope.data = [{
"table":[{
"employee":"name1",
"value1":"10",
"value2":"20"
},
{
"employee":"name2",
"value1":"15",
"value2":"30"
}]
},
{
"table":[{
"company":"name1",
"compnayValue":"12"
},
{
"company":"name2",
"compnayValue":"12"
}]
}]
<ul>
<li ng-repeat="item in data">
<table>
<tr ng-repeat="row in item.table">
<td>{{??}}</td>
<td>{{??}}</td>
</tr>
</table>
</li>
</ul>
You could enumerate all properties and display their values by another ng-repeat on td:
<li ng-repeat="item in data">
<table>
<tr ng-repeat="row in item.table">
<td ng-repeat="(key, value) in row">
{{row[key]}}
</td>
</tr>
</table>
</li>
but that would break the tabular format of data since some rows would have more tds. To prevent that you could first find out the set of all keys on all rows, do a th repeat with those first and then display them on the corresponding td below, e.g.:
<th ng-repeat="propertyName in allPossiblePropertyNames">
{{propertyName}}
</th>
and
<td ng-repeat="propertyName in allPossiblePropertyNames">
{{row[propertyName ]}}
</td>
Use <tbody> to represent an object inside table array and (key,value) syntax mentioned in iterating over object properties section to iterate over it's properties like:
angular.module('test', []).controller('testCtrl', function($scope) {
$scope.data = [{
"table": [{
"employee": "name1",
"value1": "10",
"value2": "20"
}, {
"employee": "name2",
"value1": "15",
"value2": "30"
}]
}, {
"table": [{
"company": "name1",
"compnayValue": "12"
}, {
"company": "name2",
"compnayValue": "12"
}]
}]
});
ul {
padding: 0;
}
ul li {
list-style-type: none;
margin-bottom: 10px;
}
table {
width: 100%;
table-layout: fixed;
background: #ebebeb;
}
tbody:nth-child(odd) tr {
color: #fff;
background: dodgerblue;
}
tbody:nth-child(even) tr {
color: #fff;
background: hotpink;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
<ul>
<li ng-repeat="item in data">
<table>
<tbody ng-repeat="row in item.table">
<tr ng-repeat="(key, value) in row">
<td>
{{key}}
</td>
<td>
{{value}}
</td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
Check this plunker, you can define template depends on your data :
https://plnkr.co/edit/fVGhKZy5gnBzuPwspy5s?p=preview
Use angular filter :
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = [{
"table":[{
"employee":"name1",
"value1":"10",
"value2":"20"
},
{
"employee":"name2",
"value1":"15",
"value2":"30"
}]
},
{
"table":[{
"company":"name1",
"compnayValue":"12"
},
{
"company":"name2",
"compnayValue":"12"
}]
}]
})
.filter('isCompnay', function() {
return function(input) {
console.log(input.employee === undefined)
return input.company ? input : undefined;
};
})
.filter('isEmployee', function() {
return function(input) {
console.log(input.employee === undefined)
return input.employee ? input : undefined;
};
});
I am having trouble with my controller. I am trying to set the default order on page load to display in sequence by number. Right now the the cards just load and one can select an order by.
I need some help please.
Controller:
var cardApp = angular.module('cardApp', []);
cardApp.controller('MainController', ['$scope', function ($scope) {
$scope.greeting = "AngularJS Hello World!";
$scope.subTitle = "AngularJS Intro";
function ctrl($scope, $filter) {
$scope.cards = [
{ "number": "2", "suit": "Hearts", "numOrd": 2 },
{ "number": "10", "suit": "Spades", "numOrd": 10 },
{ "number": "5", "suit": "Spades", "numOrd": 5 },
{ "number": "Q", "suit": "Hearts", "numOrd": 12 }
];
}
}]);
View:
<!doctype html>
<html>
<head>
<title>Starting Angular</title>
</head>
<body ng-app="cardApp">
<div ng-controller="MainController">
<h1 ng-bind="greeting"></h1>
<h3 ng-bind="subTitle"></h3>
<span>Sort By:</span>
<select ng-model="orderProp">
<option value="suit">Suit</option>
<option value="numOrd">Number</option>
</select>
<hr>
<table>
<tr>
<th>Number</th>
<th>Suit</th>
</tr>
<tr ng-repeat="card in cards | orderBy:orderProp">
<td ng-bind ="card.number"></td>
<td ng-bind ="card.suit"></td>
</tr>
</table>
<br />
</div>
<script src="http://code.angularjs.org/1.3.3/angular.min.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
define a value of orderProp as part of the scope creation just like you did for greeting and subTitle.
$scope.orderProp = 'numOrd';