I have json output from api wants to display in ng-repeat on div
[
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
}
]
I want to display like this
<div class="list-row">
<div class="list-cell">abc</div>
<div class="list-cell">Jaakr1</div>
<div class="list-cell">poonam.kumar#abc.com</div>
<div class="list-cell">Developer 1</div>
</div>
<div class="list-row">
<div class="list-cell"></div>
<div class="list-cell">janam1</div>
<div class="list-cell">raja#abc.com</div>
<div class="list-cell">Developer 2</div>
</div>
Please provide the solution
Apart from all the answers posted above i would like to post mine that will handle multiple JSON objects inside the array. Since you have only one object right now one of the above solution may work but when you have more that one object inside the array then this will work great.
HTML
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="(key1, value1) in data">
<div class="list-row" ng-repeat="(key2, value2) in data[key1].namesList">
<div class="list-cell"><span ng-if='$index == 0'>{{data[key1].companyName}}</span> </div>
<div class="list-cell">{{value2.name}}</div>
<div class="list-cell">{{value2.email}}</div>
<div class="list-cell">{{value2.job}}</div>
</div>
</div>
</div>
Controller
angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
$scope.data = [
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
},
{
"companyName": "abc2",
"namesList": [
{
"name": "Jaakr12",
"email": "poonam.kumar#abc.com2",
"job": "Developer 12"
},
{
"name": "janam12",
"email": "raja#abc.com2",
"job": "Developer 22"
}
]
}
];
})
For more generalization i have added two JSON objects inside the array and the output is exactly what you expected. To play around i have added the JSFIDDLE
<div *ngFor="let person of jsonObj.namesList">
<div class="list-cell"></div>
<div class="list-cell">{{ person.name }}</div>
<div class="list-cell">{{ person.email }}</div>
<div class="list-cell">{{ person.job}}</div>
</div>
You can do this,
<div ng-repeat="item in myArray[0].namesList" class="list-row">
<div class="list-cell">{{item.name}}</div>
<div class="list-cell">{{item.email}}</div>
<div class="list-cell">{{item.job}}</div>
</div>
DEMO
var myApp = angular.module('ReqWebApp', [])
myApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.myArray = [
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
}
];
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
<div ng-repeat="item in myArray[0].namesList" class="list-row">
<div class="list-cell">{{item.name}}</div>
<div class="list-cell">{{item.email}}</div>
<div class="list-cell">{{item.job}}</div>
</div>
</body>
</html>
You can do something like this:
<div class="list-row" ng-repeat="nameObj in data.namesList">
<div class="list-cell">{{data.companyName}}</div>
<div class="list-cell">{{nameObj.name}}</div>
<div class="list-cell">{{nameObj.email}}</div>
<div class="list-cell"{{nameObj.job}}</div>
</div>
Related
2 options:
what is better for performance and watchers using, now I am using the first option and I would like to improve performance
the object today looks like:
message = {
message : X,
}
and I would like to do somthing like :
obj = {
text : text,
icon: "src.png"
status: X,
class : "className",
color: "color_code_like_#ffff"
}
1 :
<div ng-if="message.message == 0" class="classA" style="">
<span class="same"><img class="sameClass" ng-src="a.gif"></span>
<span class="status-text a_with_animation" style="color:red;">textA</span>
</div>
<div ng-if="message.message == 1" class="classB" style="">
<span class="same"><img class="sameClass" ng-src="b.png"></span>
<span class="status-text" style="color:blue;">textB</span>
</div>1
<div ng-if="message.message == 2" class="classC" style="">
<span class="same"><img class="sameClass" ng-src="c.png"></span>
<span class="status-text" style="color:black;">TextC</span>
</div>
option 2
<div class="{{obj.class}}" style="">
<span class="same"><img class="sameClass" ng-src="{{obj.class}}"></span>
<span class="status-text {{obj.animation}" style="color:red;">
{{obj.text}}</span>
</div>
also all the data here is two way binding
Not really pretty but I made an example of how you could populate your data with ng-include template. Here is a demo:
<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-controller="myCtrl">
<select ng-model="message" ng-change="change()" ng-options="x.message for x in messages">
</select>
<br>
ngInclude: <div ng-include="'abc.html'"></div>
Directive: <div temp-directive></div>
<!-- A separate file for the template -->
<script type="text/ng-template" id="abc.html">
<div class="{{obj.class}}" style="">
<span class="same"><img class="sameClass" ng-src="{{obj.icon}}"></span>
<span class="status-text {{obj.animation}}" ng-style="obj.style">
{{obj.text}}</span>
</div>
</script>
</div>
<script>
var app = angular.module('myApp', []);
app.directive("tempDirective", function() {
return {
template : "<div class='{{obj.class}}' style=''><span class='same'><img class='sameClass' ng-src='{{obj.icon}}'></span><span class='status-text {{obj.animation}}' ng-style='obj.style'> {{obj.text}}</span></div>"
};
});
app.controller('myCtrl', function($scope) {
$scope.messages = [{
"message": 0
}, {
"message": 1
}, {
"message": 2
}];
$scope.message = $scope.messages[0]; // initialise
$scope.objects = [{
"text": "Message - 0",
"icon": "a.gif",
"animation": "a_with_animation",
"class": "classA",
"style": {
"color": "#00aaaa"
}
}, {
"text": "Message - 1",
"icon": "b.png",
"animation": "",
"class": "classB",
"style": {
"color": "#aa00aa"
}
}, {
"text": "Message - 2",
"icon": "c.png",
"animation": "",
"class": "classC",
"style": {
"color": "#aaaa00"
}
}];
$scope.obj = $scope.objects[0]; // initialise
$scope.change = function() { // changing the template data
$scope.obj = $scope.objects[$scope.message.message];
}
});
</script>
</body>
</html>
[Note]: it is best to replace ng-include with a component / directive with their template (not templateUrl) for performance improvement, since it is asynchronous and takes time to load the HTML
I have an array like this
$scope.mentors = [ {"name":"Jonathan", "status":0},
{"name": "Nathan","status":1},
{"name": "Chris","status":1},
{"name": "Brian","status":0}];
here my view code
<div ng-repeat="m in mentors">
<div ng-if="m.status == '1'">
<div>
{{m.name}}
</div>
</div>
</div>
and my result is :
Nathan and Chris
what can I do to just make it show Nathan or Chris
it must only show one result only
p/s: already try ng-show="$last" it did not work since Brian status is '0'
You can filter the array on statuses and then just take the first by checking against $index
angular.module('app', []).controller('myCtrl',function($scope){
$scope.mentors = [ {"name":"Jonathan", "status":0},
{"name": "Nathan","status":1},
{"name": "Chris","status":1},
{"name": "Brian","status":0}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body ng-app="app">
<div ng-controller="myCtrl">
<div ng-repeat="m in mentors | filter : {status: 1}">
<div ng-if="$index == 0">
<div>
{{m.name}}
</div>
</div>
</div>
</div>
</body>
</html>
You could use the limitTo and filter
<div ng-repeat="m in mentors | filter: { status : '1'}| limitTo : 1">
<div>
{{m.name}}
</div>
</div>
There is no reason to use ng-repeat if you only need to display 1 item.
You should handle this in your controller. Create a new variable that will hold the mentor that you want to show.
To find Nathan, you can use Array#find(). It will return the first item that matches the condition status === 1
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.mentors = [{
"name": "Jonathan",
"status": 0
},
{
"name": "Nathan",
"status": 1
},
{
"name": "Chris",
"status": 1
},
{
"name": "Brian",
"status": 0
}
];
$scope.mentor = $scope.mentors.find(m => m.status === 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{mentor.name}}</h1>
</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}}
Hi I am having some categories displayed and I want to show create bookmark div when a particular category is selected and not when all of the categories are displayed.
I tried the following code.It hides the div even if I try to return hardcoded "true". Please let me know what I am doing wrong here !
http://codepen.io/anon/pen/pJRRvE
<html ng-app="Eggly">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Eggly</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/eggly.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body ng-controller="MainCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a>
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories" ng-class="{'active':isCurrentCategory(category)}">
<a ng-click="setCurrentCategory(category)">
{{category.name}}
</a>
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
</button>
{{bookmark.title}}
</div>
<!--CREATING -->
<div ng-if="shouldShowCreating()">
<button type="button" class="btn btn-link">
<span class="glyphicon glyphicon-plus"></span>
Create Bookmark
</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app/eggly-app.start.js"></script>
</body>
angular.module('Eggly', [
])
.controller('MainCtrl', function ($scope) {
$scope.categories = [
{"id": 0, "name": "Development"},
{"id": 1, "name": "Design"},
{"id": 2, "name": "Exercise"},
{"id": 3, "name": "Humor"}
];
$scope.bookmarks = [
{"id": 0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
{"id": 1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
{"id": 2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
{"id": 3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
{"id": 4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
{"id": 5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
{"id": 6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
{"id": 7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
{"id": 8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
];
$scope.currentCategory = null;
$scope.isCreating = false;
$scope.isEditing = false;
function isCurrentCategory(category) {
return $scope.currentCategory !== null && category.name === $scope.currentCategory.name;
}
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.isCurrentCategory = isCurrentCategory;
$scope.setCurrentCategory = setCurrentCategory;
function shouldShowCreating() {
// return $scope.currentCategory && !$scope.isEditing;
return true;
}
})
;
The method shouldShowCreating is a "private" method of your controller and not part of the $scope. To access the method from your template, you need to change it to:
$scope.shouldShowCreating = function() {
return $scope.currentCategory && !$scope.isEditing;
}
Question: How do you clear a dynamically created ng-repeat AngularJS form field? If you can find a place I didn't look for the answer to this, I'd be surprised.
Background: I have AngularJS pulling JSON through a Service into my controller. I then use scope to ng-repeat labels for a form. I am having trouble clearing the fields. Since words don't accurately tell you what I am doing here is the basic code setup. I hacked it down to a few lines.
I've tried the old $scope.formName.inputName=""; and $scope.inputName="";, but they don't work. Any ideas or a direction to go?
http://plnkr.co/edit/BtID7a8EnyxuxClwdHkS?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="AppTest as app">
<form name="formName" id="formName" style="width: 320px">
<div ng-repeat="item in currentInfo.attribute">
<div style="float:left;">{{item.desc}} </div>
<div style="float:left;">
<input name="forminput" ng-model="forminput" style="width:200px" type="text" value=""/>
</div>
</div>
<button value="Clear" style="float:left;" ng-click="clearMe()">Clear</button>
</form>
</body>
</html>
var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.currentInfo = {
"attribute": [
{
"name": "ACCT",
"desc": "Account #",
},
{
"name": "FNAME",
"desc": "First Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "LNAME",
"desc": "Last Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "MNAME",
"desc": "Middle Name",
"type": "CHAR",
"validation": "^[a-zA-Z]+[1-9]+"
}
]
};
$scope.clearMe = function (){
$scope.forminput = "";
};
});
You are repeating a single ngmodel="forminput" use unique for each by making forinput an object and creating unique models with keys ng-model="forminput[item.desc]"
first in your controller
$scope.forminput = {};
then in view, change input as
Demo:
// Code goes here
var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.forminput = {};
$scope.currentInfo = {
"attribute": [
{
"name": "ACCT",
"desc": "Account #",
},
{
"name": "FNAME",
"desc": "First Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "LNAME",
"desc": "Last Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "MNAME",
"desc": "Middle Name",
"type": "CHAR",
"validation": "^[a-zA-Z]+[1-9]+"
}
]
};
$scope.clearMe = function (){
console.log("herleme")
$scope.forminput = {};
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="AppTest as app">
<h1>Hello Plunker!</h1>
<form name="formName" id="formName">
<div ng-repeat="item in currentInfo.attribute">
<div style="float:left;">{{item.desc}} </div>
<div > <input name="forminput[item.desc]" ng-model="forminput[item.desc]" style="width:200px" type="text" value=""/>
</div>
</div>
<button value="Clear" ng-click="clearMe()">Clear</button>
</form>
</body>
<input name="forminput[item.desc]"
ng-model="forminput[item.desc]"
style="width:200px" type="text" value=""/>
and clearing it as
$scope.clearMe = function (){
console.log("herleme")
$scope.forminput = {};
};
If I understand, you want to clear all fields in the form on clicking the 'clear' button?
Here's a working version:
http://plnkr.co/edit/f0QSDKH7qkM8CcZRU5Js?p=preview
var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.currentInfo = {
"attribute": [
{
"name": "ACCT",
"desc": "Account #",
},
{
"name": "FNAME",
"desc": "First Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "LNAME",
"desc": "Last Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "MNAME",
"desc": "Middle Name",
"type": "CHAR",
"validation": "^[a-zA-Z]+[1-9]+"
}
]
};
$scope.clearMe = function (){
for(var i = 0; i < $scope.currentInfo.attribute.length; i++) {
$scope.currentInfo.attribute[i].forminput = '';
}
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="AppTest as app">
<h1>Hello Plunker!</h1>
<form name="formName" id="formName">
<div ng-repeat="item in currentInfo.attribute">
<div style="float:left;">{{item.desc}} </div>
<div style="float:left;"> <input name="forminput" ng-model="item.forminput" style="width:200px" type="text" value=""/>
</div>
</div>
<button value="Clear" ng-click="clearMe()">Clear</button>
</form>
</body>
</html>
I've used the currentInfo model itself to bind the value of the inputs. This means they'll be available outside of the scope of the ng-repeat. Then the clear function iterates through each item in the 'attributes' array and sets the value to empty string.
You were on the right path, but with slight bug. All of the generated forms were bind to same model - forminput. You have to generate model binding dynamically.
<input name="forminput" ng-model="formmodel[item.name]"/>
and in the controller
$scope.formmodel = {};
check out the plunkr
Also, for generated forms check out projects as autofields, no need to reinvent the wheel.