I am writing a client-side application with AngularJS for fun. In a part of the application it's supposed to show all the applicants in a table, automatically fetched from my JSON array. But it isn't working.
This is my code:
//engine.js
(function(){
angular
.module("resumeBase", []);
})();
//controllers.js
(function(){
angular
.module("resumeBase")
.controller("tabularList", listController);
function listController() {
var vm = this;
vm.data = applicants;
}
var applicants = [
{
firstname: "Nima",
lastname: "Bavari",
evaluation: 5,
category: "IT & Computers",
fileLocation: "",
empConfirmed: "found",
confirmTime: "01-01-2017",
employer: "EnDATA",
payConfirmed: "yes"
}
]
})();
<!DOCTYPE html>
<html ng-app="resumeBase">
<head>
<title>::Search Entries::</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
</head><body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script type="text/javascript" src="scripts/engine.js"></script>
<script type="text/javascript" src="scripts/controllers.js"></script>
<div id="container" ng-controller="tabularList">
<hr />
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Evaluation</th>
<th>Category</th>
<th>Resume</th>
<th>Found Job?</th>
<th>Date and Time</th>
<th>Employer</th>
<th>Paid Us?</th>
</tr>
<tr ng-repeat="item in tabularList.data">
<td>{{item.firstname}}</td>
<td>{{item.lastname}}</td>
<td>{{item.evaluation}}</td>
<td>{{item.category}}</td>
<td><a ng-href="{{item.fileLocation}}" target="blank">{{item.fileLocation}}</a></td>
<td>{{item.empConfirmed}}</td>
<td>{{item.confirmTime}}</td>
<td>{{item.employer}}</td>
<td>{{item.payConfirmed}}</td>
</tr>
</table>
[Add New Entry]
</div>
</body>
</html>
What do you recommend? Where is my mistake?
You are missing the controller as syntax, Just change your HTML as,
<div id="container" ng-controller="tabularList as vm">
also,
<tr ng-repeat="item in vm.data">
DEMO
//engine.js
(function(){
angular
.module("resumeBase", []);
})();
//controllers.js
(function(){
angular
.module("resumeBase")
.controller("tabularList", listController);
function listController() {
var vm = this;
vm.data = applicants;
}
var applicants = [
{
firstname: "Nima",
lastname: "Bavari",
evaluation: 5,
category: "IT & Computers",
fileLocation: "",
empConfirmed: "found",
confirmTime: "01-01-2017",
employer: "EnDATA",
payConfirmed: "yes"
}
]
})();
<!DOCTYPE html>
<html ng-app="resumeBase">
<head>
<title>::Search Entries::</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
</head><body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<div id="container" ng-controller="tabularList as vm">
<hr />
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Evaluation</th>
<th>Category</th>
<th>Resume</th>
<th>Found Job?</th>
<th>Date and Time</th>
<th>Employer</th>
<th>Paid Us?</th>
</tr>
<tr ng-repeat="item in vm.data">
<td>{{item.firstname}}</td>
<td>{{item.lastname}}</td>
<td>{{item.evaluation}}</td>
<td>{{item.category}}</td>
<td><a ng-href="{{item.fileLocation}}" target="blank">{{item.fileLocation}}</a></td>
<td>{{item.empConfirmed}}</td>
<td>{{item.confirmTime}}</td>
<td>{{item.employer}}</td>
<td>{{item.payConfirmed}}</td>
</tr>
</table>
[Add New Entry]
</div>
</body>
</html>
Related
I have some basic HTML with a small script that fetches information from endpoint and retrieves information about videos.
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3" style="width: 450px;">
<h2 class="text-center">Videos</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>title</th>
<th>id</th>
<th>duration</th>
<th>length</th>
</tr>
</thead>
<tbody>
<tr>
<td id="title"></td>
<td id="id"></td>
<td id="duration"></td>
<td id="length"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="script.js"></script>
</html>
const options = {method: 'GET', headers: {Accept: 'application/json', Authorization: 'API-KEY'}};
fetch('https://api.synthesia.io/v2/videos', options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));
I retrive the information fine in the console:
createdAt: 1652951825
description: "How to create your custom avatar"
duration: "0:01:01a.000"
id: "5099a5c5-ca44-412a-a4b3-da9fbe24da04"
lastUpdatedAt: 1652954240
status: "complete"
title: "Creating your custom avatar"
visibility: "private"
But i'm struggling with how to map this into my table.
In case You have a single video response
let data = {
createdAt: 1652951825,
description: "How to create your custom avatar",
duration: "0:01:01a.000",
id: "5099a5c5-ca44-412a-a4b3-da9fbe24da04",
lastUpdatedAt: 1652954240,
status: "complete",
title: "Creating your custom avatar",
visibility: "private"
}
document.getElementById("title").innerHTML = data.title;
document.getElementById("id").innerHTML = data.id;
document.getElementById("duration").innerHTML = data.duration;
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3" style="width: 450px;">
<h2 class="text-center">Videos</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>title</th>
<th>id</th>
<th>duration</th>
<th>length</th>
</tr>
</thead>
<tbody>
<tr>
<td id="title"></td>
<td id="id"></td>
<td id="duration"></td>
<td id="length"></td>
</tr>
</tbody>
</table>
</div>
Or If you got an array of data, you can try
let data = {
vodeos: [{
createdAt: 1652951825,
description: "How to create your custom avatar",
duration: "0:01:01a.000",
id: "5099a5c5-ca44-412a-a4b3-da9fbe24da04",
lastUpdatedAt: 1652954240,
status: "complete",
title: "Creating your custom avatar",
visibility: "private"
},
{
createdAt: 1652951825,
description: "How to create your custom avatar",
duration: "0:01:01a.000",
id: "5099a5c5-ca44-412a-a4b3-da9fbe24da04",
lastUpdatedAt: 1652954240,
status: "complete",
title: "Creating your custom avatar",
visibility: "private"
}
]
}
data.vodeos.forEach(video => {
let row = `<tr>
<td>${video.title}</td>
<td>${video.id}</td>
<td>${video.duration}</td>
<td>${video.length}</td>
</tr>`;
document.querySelector('tbody').innerHTML += row;
});
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3" style="width: 450px;">
<h2 class="text-center">Videos</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>title</th>
<th>id</th>
<th>duration</th>
<th>length</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
i was trying to learn key-focus in my jquery Datatables but it doesn't work. Here is my simple piece of code. can anyone please help me know what's the problem ?
This is my HTML file :
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="tableScript.js"></script>
<meta charset="UTF-8">
</head>
<body>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<div id="details"></div>
</body>
</html>
This is my JS file (tableScript.js) :
$(document).ready(function() {
var table = $('#example').DataTable( {
keys: true
} );
table
.on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
var rowData = datatable.row( cell.index().row ).data();
$('#details').html( 'Cell in '+rowData[0]+' focused' );
} )
.on( 'key-blur', function ( e, datatable, cell ) {
$('#details').html( 'No cell selected' );
} );
});
It doesn't show any information in (#details). Any idea what's wrong here ?
$(document).ready(function () {
var table = $('#example').DataTable({
keys: true
});
table
.on('key-focus', function (e, datatable, cell, originalEvent) {
var rowData = datatable.row(cell.index().row).data();
$('#details').html('Cell in ' + rowData[0] + ' focused');
})
.on('key-blur', function (e, datatable, cell) {
$('#details').html('No cell selected');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js'></script>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<th align="right">Count</th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td contenteditable>4</td>
<td contenteditable>5</td>
<td contenteditable>6</td>
</tr>
<tr>
<td contenteditable>7</td>
<td contenteditable>8</td>
<td contenteditable>9</td>
</tr>
</tbody>
</table>
<div id="details"></div>
Note :- You need to add dataTables.keyTable to bind key events
I am able to fill the contents row-by-row. However, I was wondering how would we fill a table with two columns. I want it to be filled columnwise without repeating contents. Basically, it should return a table with two rows and two columns.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">
<table align=center>
<tr>
<td>{{x}}</td>
<td>{{x}}</td>
</tr>
</table>
</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
</script>
</body>
</html>
In AngularJS the data are manipulated mostly in JSON and collected as Array data structure.
Get your data from API or service call and convert the data into appropiate array of objects, then the data can be easily assigned to the table column and the record values are assigned to each row of the table using the "ng-repeat" in AngularJS.
In the below code you can see the "ng-repeat" and "x in records" is used as the loop for iterating through records of data values and assign to table.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">
<table align=center>
<tr>
<td>{{x.name}}</td>
</tr>
<tr>
<td>{{x.location}}</td>
</tr>
</table>
</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{"name":"Alfreds Futterkiste", "location":"avenue1"},
{"Berglunds snabbköp", "location":"avenue2"},
{"name":"Centro comercial Moctezuma", "location":"avenue3"},
{"name":"Ernst Handel", "location":"avenue4"},
]
</script>
</body>
</html>
Change your code like below
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records" ng-if="$even">
<table align=center>
<tr>
<td>{{x}}</td>
<td>{{records[$index+1]}}</td>
</tr>
</table>
</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
</script>
</body>
</html>
Your $scope is not taking, change your $scope like js array of object. And Give ng-repeat in correct place. Change your code like below.
<html>
<head>
<script src="https://opensource.keycdn.com/angularjs/1.6.2/angular.min.js "></script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',['$scope', function($scope){
$scope.records = [{name:"Alfreds Futterkiste", location:"avenue1"},{name:"Berglunds snabbköp", location:"avenue2"},{name:"Centro comercial Moctezuma", location:"avenue3"},{name:"Ernst Handel", location:"avenue4"}];
$scope.records1 = [{name:"Centro comercial Moctezuma", location:"avenue1"},{name:"Ernst Handel", location:"avenue2"},{name:"Berglunds snabbköp", location:"avenue3"},{name:"Alfreds Futterkiste", location:"avenue4"}];
}]);
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<table align=center>
<tr>
<th>Object one</th>
<th>Object two</th>
</tr>
<tr ng-repeat="x1 in records">
<td>{{x1.name}}</td>
<td>{{records1[$index].name}}</td>
</tr>
</table>
<br>
Your code result:-
<h3 ng-repeat="x in records">
<table align=center>
<tr>
<th>Country</th>
<th>Languages</th>
</tr>
<tr>
<td>{{x.name}}</td>
<td>{{x.location}}</td>
</tr>
</table>
</h3>
</div>
</body>
</html>
$scope.records = [
{name:"Alfreds Futterkiste", location:"avenue1"},
{name:"Berglunds snabbköp", location:"avenue2"},
{name:"Centro comercial Moctezuma", location:"avenue3"},
{name:"Ernst Handel", location:"avenue4"},
];
<table align=center>
<tr ng-repeat="x in records">
<td>{{x}}</td>
<td>{{x}}</td>
</tr>
</table>
ng-repeat not working with table,in the output only header part displayed? As i think the binding i did is perfectly fine, but something is there which i am missing?
When i try to run in Stackoverflow ide it is working fine.
I am using ADOBE Brackets.whether its the error in brackets??
Please suggest the best IDE for angularjs ?
Can anyone help me out where i am doing wrong?
var myApp=angular.module("myApp",[]);
var mycontroller=function($scope)
{
var employees=[
{Name:'Sahil',dateOfBirth:new Date(),gender:"Male",salary: 400000},
{Name:'Shaloni',dateOfBirth:new Date(),gender:"Female",salary: 100000},
{Name:'Nitish',dateOfBirth:new Date(),gender:"Male",salary: 300000},
{Name:'Diksha',dateOfBirth:new Date(),gender:"Female",salary: 600000},
{Name:'Tarun',dateOfBirth:new Date(),gender:"Male",salary: 900000}
]
$scope.emp=employees;
};
myApp.controller('myController',mycontroller);
<HTML ng-app="myApp">
<Head>
<title></title>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="day4.js"></script>
<link href="Style.css" rel="stylesheet"/>
</Head>
<body>
<div ng-controller="myController">
<table>
<thead>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
<th>Salary in Dollors</th>
</thead>
<tbody>
<tr ng-repeat="employee in emp">
<td>{{employee.Name}}</td>
<td>{{employee.dateOfBirth}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</HTML>
Please find your solution , https://plnkr.co/edit/hFIfPlTcP8VLVE72coth
And problem in your code is here :
var mycontroller=function($scope)
and myApp.controller('myController',mycontroller);
mycontroller variable is not getting called. put Alert(); in that block and see.
And for editor you can use SUBLIME editor , Visual studio code, : Intellisense for angular2
var myApp=angular.module("myApp",[]);
var mycontroller=function($scope)
{
var employees=[
{Name:'Sahil',dateOfBirth:new Date(),gender:"Male",salary: 400000},
{Name:'Shaloni',dateOfBirth:new Date(),gender:"Female",salary: 100000},
{Name:'Nitish',dateOfBirth:new Date(),gender:"Male",salary: 300000},
{Name:'Diksha',dateOfBirth:new Date(),gender:"Female",salary: 600000},
{Name:'Tarun',dateOfBirth:new Date(),gender:"Male",salary: 900000}
]
$scope.emp=employees;
};
myApp.controller('myController',mycontroller);
<HTML ng-app="myApp">
<Head>
<title></title>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="day4.js"></script>
<link href="Style.css" rel="stylesheet"/>
</Head>
<body>
<div ng-controller="myController">
<table>
<thead>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
<th>Salary in Dollors</th>
</thead>
<tbody>
<tr ng-repeat="employee in emp">
<td>{{employee.Name}}</td>
<td>{{employee.dateOfBirth}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</HTML>
I'm trying to learn Handlebars.js (first hour) & seem to be hitting an initial problem (it isn't working).
Here is my html:
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="js/handlebars-v4.0.5.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<p>Hi!</p>
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{/users}}
</tbody>
</table>
</script>
</body>
</html>
Here is my main.js:
$(document).ready(function() {
console.log("I'm Here!");
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
users: [{
username: "alan",
firstName: "Alan",
lastName: "Johnson",
email: "alan#test.com"
}, {
username: "allison",
firstName: "Allison",
lastName: "House",
email: "allison#test.com"
}, {
username: "ryan",
firstName: "Ryan",
lastName: "Carson",
email: "ryan#test.com"
}]
};
$("#content-placeholder").html(template(data));
});
I'm seeing the console log, but the table is not being written at all. There are no console error messages & I'm a bit stuck as to where the snag is.
Hopefully it is not tiredness causing something obvious like a typo...
To make your code work as you have it, you need to define an HTML element in your document that matches #content-placeholder so that $("#content-placeholder").html(template(data)); has a place to put the rendered template.
You could solve that by adding it to your HTML like this:
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="js/handlebars-v4.0.5.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<p>Hi!</p>
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{/users}}
</tbody>
</table>
</script>
<!-- Add this line -->
<div id="content-placeholder"></div>
</body>
</html>
I changed
$("#content-placeholder").html(template(data));
to
$('body').append(template(data));
& I got the desired output.