Hi need help on how to loop this array value into 3 column using angularjs.
Currently my view is like this
Html table contain 3 column the value showing in vertical instead of horizontal
Below is my JSON view
{
"Table1": {
"titleList": [
"Table1",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Ayu",
"startDate": "30 Jul 2015",
"completionDate": "30 Jul 2015"
}
],
},
"Table2": {
"titleList": [
"Table2",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Siti",
"startDate": "",
"completionDate": ""
},
{
"Name": "wan",
"startDate": "",
"completionDate": ""
},
{
"Name": "nita",
"startDate": "",
"completionDate": ""
},
],
},
"Table3": {
"titleList": [
"HGA",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Fatimah",
"startDate": "",
"completionDate": ""
},
{
"Name": "Nora",
"startDate": "",
"completionDate": ""
},
],
}
}
My angularjs showing as below
<tbody ng-repeat ="(nodeSummaryKey, nodeSummaryVal) in nodeSummary">
<tr ng-if="isObject(nodeSummaryVal)" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat = "(dataKey, dataValue) in nodeSummaryVal" >
<td ng-if="dataKey == 'titleList'" class="stx-attributes-group"
ng-repeat="(eachDataKey, eachDataValue) in nodeSummaryVal.titleList">{{eachDataValue}}</td>
<td ng-if="dataKey == 'dataList'" ng-repeat="(eachDataKey, eachDataValue) in dataValue">
<div ng-repeat="(eachKey, eachValue) in eachDataValue">{{eachValue}}</div>
</tr>
</tbody>
You could achieve it by simple ng-repeat:
angular.module('app', []).controller('Controller', function($scope) {
$scope.table_data = {
"Table1": {
"titleList": ["Table1", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Ayu",
"startDate": "30 Jul 2015",
"completionDate": "30 Jul 2015"
}],
},
"Table2": {
"titleList": ["Table2", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Siti",
"startDate": "",
"completionDate": ""
}, {
"Name": "wan",
"startDate": "",
"completionDate": ""
}, {
"Name": "nita",
"startDate": "",
"completionDate": ""
}, ],
},
"Table3": {
"titleList": ["HGA", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Fatimah",
"startDate": "",
"completionDate": ""
}, {
"Name": "Nora",
"startDate": "",
"completionDate": ""
}, ],
}
};
});
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
<!DOCTYPE html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Controller">
<div ng-repeat="(dta_key,dta_value) in table_data">
<h1>{{dta_key}}</h1>
<table >
<thead>
<tr>
<th ng-repeat="thead in dta_value.titleList">{{thead}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tbody in dta_value.dataList">
<td ng-repeat="trow in tbody">{{trow}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Related
I am trying to create HTML table with dynamic tr and td.
I have added nested loops in the HTML itself , dynamic column headers(th) are working fine but values are not getting added in correct td.
Here is a data I have :
"finalResult": [
{
"tableNamee": "Table_1",
"colCategories": [
{
"columnnnn": "User",
"values": [
{
"value": "0"
},
{
"value": "10"
},
{
"value": "60"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
}
]
},
{
"columnnnn": "Header1",
"values": [
{
"value": "460"
}
]
},
{
"columnnnn": "Amount",
"values": [
{
"value": "10"
},
{
"value": "100"
},
{
"value": "50"
}
]
}
]
},
{
"tableNamee": "Table_2",
"colCategories": [
{
"columnnnn": "User",
"values": [
{
"value": "07"
},
{
"value": "10"
}
]
},
{
"columnnnn": "Amount",
"values": [
{
"value": "70"
}
]
},
{
"columnnnn": "User1",
"values": [
{
"value": "57"
}
]
},
{
"columnnnn": "Column",
"values": [
{
"value": "80"
}
]
},
{
"columnnnn": "Column2",
"values": [
{
"value": "10"
}
]
}
]
}
]
And below is the html code for it :
<div *ngFor="let j of finalResult; index as i" class="">
<div class=""> <span title="{{j.tableNamee}}">Table Name : {{j.tableNamee}} </span>
</div>
<div class="">
<table class="table table-bordered">
<tbody>
<tr class="">
<th class="" scope="col" *ngFor="let k of j.colCategories">
{{k.columnnnn}}
</th>
</tr>
<ng-container *ngFor="let k of j.colCategories">
<tr class="">
<ng-container>
<div *ngFor="let m of k.values">
<td class="">
<div class=""> <span title="{{m.value}}"> {{m.value}} </span>
</div>
</td>
</div>
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
There is no any specific ts code for this. I just manipulated data in above format and trying to apply loops in HTML itself. Am I doing anything wrong?
this is desired output :
desired output
and this is current output I am getting :
current output
Any help would be appreciated!
Your HTML markup looks weird in that your <tr> contains a <div> which wraps the <td>s. And I think that is what's causing your problem.
I have not tried this but may you can try changing your <table> markup to this:
<table class="table table-bordered">
<thead>
<tr class="">
<th class="" scope="col" *ngFor="let k of j.colCategories">
{{k.columnnnn}}
</th>
</tr>
</thead>
<tbody>
<tr class="" *ngFor="let k of j.colCategories">
<td class="" *ngFor="let m of k.values">
<div class="">
<span title="{{m.value}}"> {{m.value}} </span>
</div>
</td>
</tr>
</tbody>
</table>
guys here's what I'm trying to do.
I want to create a vertical menu with submenus on it.
using this JSON code:
"response": {
"data": [
{
"id": 1,
"name": "AC Articles",
"subname": {
"data": [
{
"id": 14,
"sub_category": "Window PC"
},
{
"id": 15,
"sub_category": "Mac PC"
}
]
}
},
{
"id": 2,
"name": "MyPage Articles",
"subname": {
"data": []
}
},
{
"id": 3,
"name": "PC/Internet Optimization",
"subname": {
"data": []
}
},
{
"id": 4,
"name": "Troubleshooting Guide",
"subname": {
"data": []
}
},
{
"id": 5,
"name": "Others",
"subname": {
"data": []
}
},
{
"id": 6,
"name": "Previous Announcements",
"subname": {
"data": []
}
},
{
"id": 7,
"name": "Operational Update",
"subname": {
"data": []
}
},
{
"id": 8,
"name": "LS Updates",
"subname": {
"data": []
}
},
{
"id": 9,
"name": "Fees Articles",
"subname": {
"data": []
}
},
{
"id": 10,
"name": "Teacher's Promotion Guide",
"subname": {
"data": []
}
},
{
"id": 11,
"name": "Modified Mypage Unlocking Process",
"subname": {
"data": []
}
},
{
"id": 12,
"name": "Training Specialization",
"subname": {
"data": []
}
},
{
"id": 13,
"name": "PHBee TESOL Common Concerns/Inquiries",
"subname": {
"data": []
}
}
]
}
so far here's what i have done
<ul class="nav flex-column">
<li
v-for="list in categories"
:key="list.id"
class="nav-item dropdown"
>
<a
v-if="list.subname"
class="nav-link dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>{{ list.name }}</a>
<a
v-else
class="nav-link"
role="button"
>{{ list.name }}</a>
<div v-for="sub in list.subname" :key="sub.id" class="dropdown-menu">
<a class="dropdown-item">{{ list.subname }}</a>
</div>
</li>
</ul>
I also want to check if there's a submenu on each menu, if there's a submenu it will create a dropdown else no dropdown for that menu
hope you guys help me.
Thank you
you can try this in v-if condition
v-if="list.subname.data.length > 0"
I have props: ['attributes']
{
"name": "Color",
"variant": [
{
"name": "Red"
},
{
"name": "Green"
},
{
"name": "Blue"
}
]
},
{
"name": "Size",
"variant": [
{
"name": "L"
},
{
"name": "XL"
},
{
"name": "XXL"
}
]
}
In Template:
<div class="form-group" v-for="(attribute, index) in attributes">
{{attribute.name}}
<div v-for="(variant, vindex) in attribute.variant">
<input type="radio"
:value="[{name: attribute.name, variant:variant.name}]"
:id="'radio' + vindex"
:name="'group' + index">
{{variant.name}}
</div>
</div>
Result:
enter image description here
Question: How do I return selected radio buttons in an array? For example:
[{
"name": "Color",
"variant":
{
"name": "Blue"
}
},
{
"name": "Size",
"variant":
{
"name": "XL"
}
}]
The radio button does not add to the array as a checkbox.
You can do something like this.
You need to splice existing item each time so new value added.
Main part was searching item and removing and you can do it by looping through current items and find index of existing item and remove it so new value can be updated.
check below code.
var attributes = [{
"name": "Color",
"variant": [
{
"name": "Red"
},
{
"name": "Green"
},
{
"name": "Blue"
}
]
},
{
"name": "Size",
"variant": [
{
"name": "L"
},
{
"name": "XL"
},
{
"name": "XXL"
}
]
}];
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
attributes: attributes,
selectedData:[]
},
methods:{
setValue( name, value) {
//console.log(name,value);
var self = this;
this.selectedData.forEach(function(val, index){
if(val['name'] == name) {
self.selectedData.splice(index, 1);
return false;
}
});
this.selectedData.push({
"name": name,
"variant":
{
"name": value
}
});
}
}
})
<!DOCTYPE html>
<html>
<head>
<script> console.info = function(){} </script>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>.half{width:50%;float:left;}</style>
</head>
<body>
<div id="app">
<div class="half">
<div class="form-group" v-for="(attribute, index) in attributes">
{{attribute.name}}
<div v-for="(variant, vindex) in attribute.variant">
<label>
<input #click="setValue(attribute.name, variant.name)" type="radio"
:value="[{name: attribute.name, variant:variant.name}]"
:id="'radio' + vindex"
:name="'group' + index">
{{variant.name}}</label>
</div>
</div>
</div>
<div class="half">
<pre>{{ selectedData }}</pre></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<style type="text/css">
body {background-color: #D3D3D3;}
table {
width: 30%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
p.one {
border-style: solid;
border-width: 5px;
}
p.groove {border-style: groove;
height: 400px;
width: 400px;
}
</style>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.categoryL = '';
$scope.categoryList = function(value) {
$scope.categoryL = value;
}
$scope.selectedCategory = {};
$scope.menus = [{
"Forms": [{
"title": "Book a Meeting Room",
"category": "Forms",
"url": "https://www.google.co.uk/",
},
{
"title": "Book a Pool Car",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Order Stationery",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Gift & Hospitality",
"category": "Forms",
"url": "https://www.google.co.uk/"
}]
}, {
"News": [{
"title": "Discovery Communications embraces Office 365",
"category": "News",
"url": "https://blogs.office.com/2016/07/18/discovery-communications-embraces-office-365-to-foster-creative-culture-of-innovation/"
},
{
"title": "Guardian Industries",
"category": "News",
"url": "https://blogs.office.com/2016/07/15/guardian-industries-connect-collaborate-and-innovate-from-anywhere/"
},
{
"title": "Data Loss Prevention Policy Tips in OneDrive",
"category": "News",
"url": "https://blogs.office.com/2016/07/14/data-loss-prevention-policy-tips-in-onedrive-mobile-apps/"
}]
},
{
"Useful Information": [{
"title": "Get started with SharePoint",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Get-started-with-SharePoint-909ec2f0-05c8-4e92-8ad3-3f8b0b6cf261"
},
{
"title": "What is SharePoint?",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/What-is-SharePoint-97b915e6-651b-43b2-827d-fb25777f446f"
},
{
"title": "Accessibility features in SharePoint Online",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Accessibility-features-in-SharePoint-Online-f291404a-dc7e-44de-a31f-d81b3099c2b9?ui=en-US&rs=en-US&ad=US"
},
{
"title": "Videos for SharePoint Online and SharePoint 2013",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Videos-for-SharePoint-Online-and-SharePoint-2013-ed074945-4ddc-4479-9efe-6b3945cf8266?ui=en-US&rs=en-US&ad=US"
}]
}]
$scope.labels = [];
(function getMenuLabels() {
angular.forEach($scope.menus, function(menu) {
$scope.labels.push({
label: Object.keys(menu)[0],
moreInformation: menu[Object.keys(menu)[0]]
});
})
$scope.selectedCategory = $scope.labels[0];
})();
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="center">
<center>
<p class="groove">
<select width="300" style="width:400px" ng-model="selectedCategory" ng-options="label.label for label in labels"></select>
<section class="categoryL">
<b ng-repeat="info in selectedCategory.moreInformation">
<br>
<table align="center" class="ex2" style="border:1px solid yellowgreen;">
<tr>
<td BGCOLOR="#ff00ff"><a ng-href="{{info.url}}">{{info.title}}</a></td>
</tr/>
</table>
</section>
</center>
</div>
</p>
</body>
</html>
Hi, if you load my code into a file you will see that i have added some CSS, however i am finding it difficult to add the links inside the border that i have created, i have managed to get the drop down inside the border but for some reason i can not add the links.
I don't know if I understand your question, but you can display title with another ng-repeat (I edited your first section) https://plnkr.co/edit/8ItCgNT4xPbpLnKbYawf?p=preview:
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in menus">
<div ng-repeat="(key,val) in menu">
{{key}}
<div ng-repeat="titles in val">{{titles.title}}</div>
</div>
</li>
</ul>
</div>
Hi its kinda long to explain my problem but i will try,
I use Angular and I have that json in a file:
{
"users": [
{
"gender": "male",
"title": "mr",
"first": "francisco",
"last": "medina",
"street": "2748 w dallas st",
"city": "flowermound",
"state": "new jersey",
"zip": "77511",
"email": "francisco.medina65#example.com",
"dob": "454252284",
"phone": "(757)-889-2571",
"cell": "(113)-542-2123",
"picture": {
"large": "http://api.randomuser.me/portraits/men/22.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/22.jpg"
}
},
{
"gender": "female",
"title": "mrs",
"first": "sherry",
"last": "elliott",
"street": "3251 brown terrace",
"city": "wichita falls",
"state": "washington",
"zip": "79455",
"email": "sherry.elliott17#example.com",
"dob": "224238139",
"phone": "(225)-793-2067",
"cell": "(968)-555-1402",
"picture": {
"large": "http://api.randomuser.me/portraits/women/37.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/women/37.jpg"
}
},
{
"gender": "male",
"title": "mr",
"first": "johnny",
"last": "medina",
"street": "1313 samaritan dr",
"city": "redding",
"state": "new hampshire",
"zip": "43269",
"email": "johnny.medina76#example.com",
"dob": "259176886",
"phone": "(991)-957-7139",
"cell": "(502)-773-1487",
"picture": {
"large": "http://api.randomuser.me/portraits/men/90.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/90.jpg"
}
}
]
}
I make http request to get the json and build a table with the results the problem is that I have to access the thumbnail picture and when i do access it it retruns me undefined, so in my opinion there is need for another http request inside that I already have but I return from the first http request three objects, so i will probably (in my opinion as I said) will need three more http requests , this is my angular code:
<!DOCTYPE html>
<html ng-app="DemoApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
<style>
table,td{
border:1px solid black;
border-collapse:collapse;
padding:5px;
}
table tr:nth-child(even)
{
background-color:#ffffff;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table th {
background-color: black;
color: white;
}
</style>
</head>
<body ng-controller="Controller as ctr">
<div class="container">
<div>
<div class="col-md-9">
<table class="table" id="orders">
<thead>
<tr>
<th>Index</th>
<th>picture</th>
<th>Name</th>
<th>Last Name</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users.users ">
<td>{{$index+1}}</td>
<td>{{user.thumbnail}}</td>
<td>{{user.first }}</td>
<td>{{user.last}}</td>
<td>Details
<!-- <td>
edit
<button ng-click ="ctrl.deleteCar(car.id)" class="remove">X</button>
delete
</td>-->
</tr>
</tbody>
</table>
</div>
<div class="col-md-3" style="border: thin lightblue solid; border-radius: 5px;padding: 1em;">
</div>
</div>
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('Controller', function($http,$scope){
var self = this;
$scope.users=[];
$scope.photoTumbnails=[];
//var users=[];
$http({
method: 'GET',
url: 'data.json'
}).then(function successCallback(response)
{
$scope.users = response.data;
console.log("The data from the file is "+$scope.users.users)
console.log("The data from the file is "+$scope.users.users.thumbnail)
}, function errorCallback(response)
{
$scope.error = response.status + ": " + response.data.statusText;
});
});
</script>
</body>
</html>
So Can I get the image to be displayed
Change
<td>{{user.thumbnail}}</td>
to
<td><img ng-src="user.picture.thumbnail"/></td>