i am new in angular programming,
i want to bind json data that i get from webservice to the html table,
here is my code :
<!DOCTYPE html>
<html>
<head>
<title>LIST OF USER Sample</title>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/module.js"></script>
<script>
function PeopleCtrl($scope, $http) {
$scope.people = [];
$scope.loadPeople = function () {
var httpRequest = $http
({
method: 'GET',
url: 'http://10.17.44.236:9090/MobileBootcamp.svc/getalluseravailability'
})
.success(function (data, status) {
debugger;
$scope.people = data;
});
};
$scope.loadPeople();
}
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="PeopleCtrl" ng-init="loadPeople()">
<table>
<tr>
<th>Id</th>
<th>Availibility</th>
</tr>
<tr ng-repeat="x in people.Datalist[0]">
<td>{{x.UserID}}</td>
<td>{{x.Availability}}</td>
</tr>
<tr>
<td>{{people.DataList[0].UserID}}</td>
<td>{{people.DataList[0].Availability}}</td>
</tr>
<tr>
<td>{{people.DataList[1].UserID}}</td>
<td>{{people.DataList[1].Availability}}</td>
</tr>
</table>
</div>
</div>
<script src="cordova.js"></script>
<script src="js/platformOverrides.js"></script>
<script src="js/index.js"></script>
</body>
</html>
and this is the json from the web service
{"Status":true,"Message":"","Data":null,"DataList":[{"ChangeBy":"Admin","ChangeDate":"\/Date(1439437580137+0700)\/","ChangeNo":2,"CreateBy":"Admin","CreateDate":"\/Date(1439437580137+0700)\/","Availability":true,"LastCheckIn":"\/Date(1439437645420+0700)\/","UserID":"Admin"},{"ChangeBy":"ITK_ABD","ChangeDate":"\/Date(1439398800000+0700)\/","ChangeNo":1,"CreateBy":"ITK_ABD","CreateDate":"\/Date(1439398800000+0700)\/","Availability":false,"LastCheckIn":"\/Date(1439398800000+0700)\/","UserID":"ITK_ABD"}]}
i already try the "ng-repeat" but it didnt work,
the data is like Data --> DataList--> [0] --> userid,availability,etc...
thx in advance
You don't need the [0]. Your ng-repeat is here to get all elements of the list. You just have to give your list, not the index and angular will do the job.
<tr ng-repeat="x in people.DataList">
Do as following -
<tr ng-repeat="x in people.Datalist">
<td>{{x.UserID}}</td>
<td>{{x.Availability}}</td>
</tr>
as you have array of objects in Datalist, you should iterate DataList instead of DataList[0]
No need for the [0]. we don't want to loop through your first object, So just people.DataList will do the job. It will loop through all objects inside that array .
<tr ng-repeat="x in people.DataList">
<td>{{x.UserID}}</td>
<td>{{x.Availability}}</td>
</tr>
You are trying to repeat object here:
<tr ng-repeat="x in people.Datalist[0]">
You can repeat only on Array data type. So you must do this like that:
<tr ng-repeat="x in people.Datalist">
Related
I have the following function which I wrote to filter data based of user input.
controller
var app = angular.module("viewJSON",[]);
app.controller("viewCtrl",function Hello($scope, $http) {
$http({
method: 'GET',
url: './data.json'
}).then(function (response){
$scope.products = response.data;
},function (error){
console.log("error");
});
var data=[];
$scope.filterData = function ($scope) {
if ($scope.names.length != 0 && $scope.brands.length != 0){
data.push(products.name.includes($scope.names) && products.brand.includes($scope.brands));
}else if($scope.names.length == 0 && $scope.brands.length != 0){
data.push(products.brand.includes($scope.brands));
}else if($scope.names.length != 0 && $scope.brands.length == 0){
data.push(products.name.includes($scope.names));
}
return data;
}
});
HTML
<!DOCTYPE html>
<html ng-app="viewJSON">
<head>
<link rel="stylesheet" href="home-page.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="home-page.js"></script>
</head>
<body ng-controller="viewCtrl">
<div class="wrap">
<div class="search" ng-innit="x=0">
<b>Product Name:</b> <input type="text" ng-model="names" class="searchTerm" ng-keydown="x = x+1"><br>
<b>Product Brand:</b> <input type="text" ng-model="brands" class="searchTerm" ng-keydown="x = x+1">
</div>
</div>
<div>
<table class="resultContent" ng-if="x > 0">
<tr>
<th>Brand</th>
<th>Name</th>
<th>Price</th>
<th>Retailer</th>
<th>Image</th>
</tr>
<tr id="rows" ng-repeat="item in filterData">
<td class="otherCol">{{ item.brand }}</td>
<td class="otherCol">{{ item.name }}</td>
<td class="otherCol">{{ item.price }}</td>
<td class="otherCol">{{ item.retailer }}</td>
<td class="imageCol"><img ng-src="{{ item.image_url}}"></td>
</tr>
</table>
</div>
</body>
</html>
I have played about with this for a while, and to my knowledge the function creates an array based of the users input this array is then displayed using ng-repeat. I have tried using filterBy: filterData, although this gives me the error filter not array which confuses me as the output from filterData is an array. I have a feeling that ng-model is not correctly binding with the values 'names' and 'brands' in the function. A point in the right direction would be appreciated.
The reason you are not seeing any results is your filterData, as filterData is a function and therefore you have to use the following syntax to use it.
ng-repeat="item in filterData()"
notice the parentheses at the end. Also keep in mind that using a function in ng-repeat is not a good practice as it is called on every DOM update and adds alot of unnecessary work. I would strongly recommend that you put the filtered data inside an array and use that array in your ng-repeat.
I have the following function which is fetching custom HTML template and passing some values into the scope to generate 'report table'. Because the template is not visible to the user but processed output is directly sent to another function I used $compile function.
It seems that values passed into the $scope are processed correctly but i am not able to get pure HTML result.
I tried to do it by this way:
var templateUrl = $sce.getTrustedResourceUrl('report.html');
$templateRequest(templateUrl).then(function(template) {
$scope.rows = reportData;
var compTest = $compile(template)($scope);
console.log(compTest); //IT RETURNS A LOT OF VALUES BUT NOT HTML OUPUT OF THE PROCESSED TEMPLATE
}, function() {
// An error has occurred
});
Many thanks for any advice.
Results is following:
HTML content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Report</title>
</head>
<body>
<table>
<thead>
<td>
</td>
<td>
Breakfast
</td>
<td>
Lunch
</td>
<td>
Dinner
</td>
<td>
Snack
</td>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>TEST</td>
<td>40</td>
<td>20</td>
<td>30</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
$compile will return a function which will then be executed by scope which in turn will returns a jQlite wrapped DOM object. So you can use outerHTML to get the Template string
or
You can use $interpolate as shown below
Demo
angular.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController);
function MyController($scope, $compile, $interpolate) {
var template = '<a ng-click="handler()">click handler</a>';
this.tmpl = $compile(template)($scope)[0].outerHTML;
this.tmplInt = $interpolate(template)($scope);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController as MC">
<p><b>using $compile along with outerHTML </b>{{MC.tmpl}}</p>
<p><b>using $interpolate </b>{{MC.tmplInt}}</p>
</div>
</div>
I am trying to pass a php Laravel array of objects with the name $event to my javascript part of the app and I am having issues with looping through the results later on.
Basically what I am doing is this
$events = Event::orderBy('id', 'DESC')->orderBy('resolved', 'desc')->get(); //get events
return View::make('events.index', compact('events')); //pass events to view
And then this is my view
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var myevents = JSON.parse('<?php echo json_encode($events) ?>');
</script>
<div class="col-sm-12" ng-app="myApp2" ng-controller="checkboxController">
<table class="table" id="keywords" cellspacing="0" cellpadding="0">
<tr ng-repeat="event in myevents" >
<td> {{event.category}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</div>
</table>
</div>
</div>
<script src="http://dsproject.dev:8000/js/jquery-1.11.1.min.js"></script>
<script src="http://dsproject.dev:8000/js/bootstrap.min.js"></script>
<script src="http://dsproject.dev:8000/js/checkboxes.js"></script>
</body>
</html>
This is my controller
var myApp2 = angular.module('myApp2',[]);
myApp2.controller('checkboxController', ['$scope', function($scope) {
//var events = [];
// $scope.some = 'hehehhehehe';
//events.($scope.event);
$scope.myevents = myevents;
console.log($scope.myevents);
/*$scope.toggle = function(id) {
alert(id);
};*/
}]);
The output I get is just {{event.category}} with no value at all. When I do console.log(myevents) or console.log($scope.myevents) in my controller I get the array of objects displayed in the console like this
What am I doing wrong and how would I fix this?
The {{ curlies are being parsed by laravel, you have to change interpolation in angular.
myApp2.config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
and then use {[{ and }]} for the angular part of variables.
In my report design's layout I have a label, table and HTML button.
How do I get values from tables, labels, etc. using the HTML button's OnClick event?
The table and label can't be accessed easily using "elementname".getValue(); Am I missing something?
Thanks.
Alright, this solution can be modified to how your actual table structure looks like, and what actual information you need. You can do this many different ways, but this solution utilizes jQuery to get the label element and also the 'td' cells from a Table and Twitter Bootstrap for styling. You can see a jsFiddle here that I made to visualize this. If it doesn't fit your needs, I would suggest looking at the jQuery API to modify how exactly you should get the data you need.
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<label id="label">This is my Table</label>
<table class="table table-striped">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter#mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
</tr>
</tbody>
</table>
<button type="button" id="getInfo" class="btn btn-primary">Get Info</button>
<br/>
<p>Your Results Object once you hit Get Info button</p>
<div id="results"></div>
<!-- Get jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
This is the Javascript:
// This solution uses jQuery
// A $( document ).ready() block.
$( document ).ready(function() {
// declares an object literal named 'results' to save future results
// declares an array literal named 'tableData' to save table data
var results = {},
tableData = [];
// this executes once you click
// the HTML button with ID '#getInfo'
$('#getInfo').click(function() {
//loop through each 'td' cell which has information
$('td').each(function() {
var value = $(this).text();
tableData.push(value);
});
// assign the label to object 'results' with property label
results.label = $('#label').text();
results.tableData = tableData;
document.getElementById("results").innerHTML =
JSON.stringify(results);
});
});
I'm new to Angularjs. I am learning about factory.
In my example, I have 2 requests to Restful Api and got 2 responses in JSON format.
With the first json, I can use ng-repeat to show them but the 2nd json can't bind to the view.
How can I bind both responses into the same view?
this is my code
index.html file
<!DOCTYPE html>
<html lang="en" ng-app='f1feed'>
<head>
<title>AngularJS Routing example</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 10px;
background-color: #F5F5F5;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="DriverController">
<table>
<thead>
<tr>
<th colspan="4">Drivers Champion Standings</th>
</tr>
<tr>
<th>No.</th>
<th>Full name</th>
<th>Driver ID</th>
<th>Points</th>
</tr>
</thead>
<tbody ng-repeat="driver in drivers">
<tr>
<td>{{$index + 1}} </td>
<td>{{driver.Driver.givenName}} {{driver.Driver.familyName}}</td>
<td>{{driver.Driver.driverId}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
<div class="info">
<h1>1st Driver Detail info</h1>
<ul>
<li>Driver ID: {{alonso.driverId}} </li>
<li>Date of Birth: {{alonso.dateOfBirth}} </li>
<li>Nationality: {{alonso.nationality}}</li>
</ul>
</div>
</body>
</html>
file app.js
var app = angular.module('f1feed',[]);
app.factory('DriverSev', function($http){
var driverApi = {};
driverApi.getDriverStands = function(){
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/current/driverStandings.json?callback=JSON_CALLBACK'
});
};
driverApi.getDetail = function(){
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/drivers/alonso.json?callback=JSON_CALLBACK'
});
};
return driverApi;
});
app.controller('DriverController', function DriverController($scope, DriverSev){
$scope.drivers = [];
$scope.alonso = [];
DriverSev.getDriverStands().success(function(data){
$scope.drivers = data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
})
DriverSev.getDetail().success(function(data){
$scope.alonso = data.MRData.DriverTable.Drivers;
console.log($scope.alonso);
})
});
Thanks
your $scope.alonso is unused in your view put it in another ng-repeat to display it
<table>
<thead>
<tr>
<th colspan="4">Drivers Champion Standings</th>
</tr>
<tr>
<th>No.</th>
<th>Name</th>
</tr>
</thead>
<tbody ng-repeat="alon in alonso">
<tr>
<td>{{$index + 1}} </td>
<td>{{alon}}</td>
</tr>
</tbody>
</table>
if it's the same data model, push it in $scope.drivers
$scope.alonso is an array.
<ANY ng-repeat="details in alonso">
<any>Driver ID: {{details.driverId}} </any>
<any>Date of Birth: {{details.dateOfBirth}} </any>
<any>Nationality: {{details.nationality}}</any>
</ANY>
should do the trick, or something ugly such as {{alonso[0].driverId}}