AngularJS not displaying json data - javascript

I've been stuck for some time now trying to display JSON data in a table with AngularJS 1.6.9.
Here is my index.html:
<!DOCTYPE html>
<head>
<title>Een eenvoudige service</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="service.js"></script>
<link rel="stylesheet" href="style.css">
<script>
</script>
</head>
<div ng-app="mijnApp" ng-controller="mijnController">
<table>
<tr>
<th>ID</th>
<th>City</th>
<th>Country</th>
</tr>
<tr ng-repeat="x in personen">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
</div>
</body>
</html>
Here is my JavaScript:
var App = angular.module('mijnApp', []);
App.controller('mijnController', function($scope, $http) {
$http.get("personen.json").then(function(response) {
$scope.personen = response.data;
});
});
Small example of my json file:
{
"records": [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
}]
}
I've tried multiple methods and the result is always the same - empty table.
How can I resolved this issue? Please help me for the same issue.

Try this:
<tr ng-repeat="x in personen.records">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td>
</tr>

You missed the records from response. use x in personen.records or set de personen in the http response like this $scope.personen = response.data.records;
I prefer the second option personally.

This will help
$.ajax({
url : "personen.json",
dataType : 'JSON',
success : function(data) {
$scope.personen = data;
},
error : function(error) {
console.log( "error occurred." );
}
});
HTML use this to view the records.
<table>
<tr ng-repeat="record in personen.records">
<td> {{record.Name}} </td>
<td> {{record.City}} </td>
<td> {{record.Country}} </td>
</tr>
</table>

Related

AngularJS: ng-repeat not show items

I tried the code of AngularJS as follows:
var app = angular.module('MyApp', []);
app.controller('new_controller', function($scope) {
$scope.people= [{
name: "GeekAgashi",
Age: 12,
attended: 1
}, {
name: "GeekSatoshi",
Age: 16,
attended: 0
}, {
name: "GeekNakumato",
Age: 14,
attended: 1
}];
});
In HTML file the code:
<div class="sidebar-pane" ng-app="MyApp" id="flight_info" ng-controller="new_controller">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="p in people">
<td>{{p.name}}</td>
<td>{{p.Age}}</td>
</tr>
</table>
</div>
On the webpage, I can only get the table frame which I think means that the data is successfully passed. But I cannot get the table items:
<table>
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<!-- ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
<td></td>
<td></td>
</tr>
<!-- end ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
<td></td>
<td></td>
</tr>
<!-- end ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
<td></td>
<td></td>
</tr>
<!-- end ngRepeat: p in people -->
</tbody>
</table>
I am just wondering if it is a bug or there is something wrong with my code, or the browser (chrome v79) does not support it.
Appendix:
I write the backend in Django and I found that if I directly run the plain HTML, the table is visible. The problem happens if I run it through a Django server. Since I am a green hand to the frontend, I am wondering if it is possible that the problem lies in the CSS file or the confliction with other local javascript?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div class="sidebar-pane" ng-app="MyApp" id="flight_info" ng-controller="new_controller">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="p in people">
<td>{{p.name}}</td>
<td>{{p.Age}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('MyApp', []);
app.controller('new_controller', function($scope) {
$scope.people= [{
name: "GeekAgashi",
Age: 12,
attended: 1
}, {
name: "GeekSatoshi",
Age: 16,
attended: 0
}, {
name: "GeekNakumato",
Age: 14,
attended: 1
}];
});
</script>
</body>
</html>
Kindly check if the above code is running?
I copy & paste your code to the snipped (Angulerjs version 1.7.5) and it seems like it's working.
var app = angular.module('MyApp', []);
app.controller('new_controller', function($scope) {
$scope.people = [{
name: "GeekAgashi",
Age: 12,
attended: 1
}, {
name: "GeekSatoshi",
Age: 16,
attended: 0
}, {
name: "GeekNakumato",
Age: 14,
attended: 1
}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="sidebar-pane" ng-app="MyApp" id="flight_info" ng-controller="new_controller">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="p in people">
<td>{{p.name}}</td>
<td>{{p.Age}}</td>
</tr>
</table>
</div>
In your question you specify that you are using django. I assume that you are using it to retrieve the people data (correct me if I'm wrong). Can you please show us how you retrieve the data? This might just be a case of async operation, so the data isn't there at the time the page is rendered.
The reason is a confliction of django and angularJS templates. The solution could be find in this question.

New to Angular, getting Uncaught TypeError: Cannot read property '$$minErr' of undefined when trying to run code

I'm new to angular and I'm attempting to take data in a json object and fill a simple table with it. After googling my error, most people are saying that with this error, the url for my library of angular is in the wrong spot, but I'm fairly sure it isn't. Can anyone help me out?
Here's my code
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.js"></script>
<body>
<div ng-app="myApp" ng-controller="myAppCtrl">
<table border="1">
<tr>
<th>Name</th>.
<th>Email</th>
<th>Office</th>
</tr>
<tr ng-repeat="x in items">
<td>{{x.Name}}</td>
<td>{{x.Email}}</td>
<td>{{x.Office}}</td></tr>
</table>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.js">
var app = angular.module('myApp', []);
app.controller('myAppCtrl', function($scope, $http) {
$http.get("testData.txt")
.then(function(response) {
var needsJSON = response.data;
var processed = JSON.parse(needsJSON);
console.log(processed);
$scope.items = processed;
});
});
</script>
</body>
</html>
Here is the text document with my data if anyone is interested
{ "Name" : "Test1", "Email" : "test1#test.com", "Office" : "NY" },
{ "Name" : "Test2", "Email" : "test2#test.com", "Office" : "LA" },
{ "Name" : "Test3", "Email" : "test3#test.com", "Office" : "ATL" }
You have wrong angular url, Please use the following code
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<body>
<div ng-app="myApp" ng-controller="myAppCtrl">
<table border="1">
<tr>
<th>Name</th>.
<th>Email</th>
<th>Office</th>
</tr>
<tr ng-repeat="x in items">
<td>{{x.Name}}</td>
<td>{{x.Email}}</td>
<td>{{x.Office}}</td></tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myAppCtrl', function($scope, $http) {
$http.get("testData.txt")
.then(function(response) {
var needsJSON = response.data;
var processed = JSON.parse(needsJSON);
console.log(processed);
$scope.items = processed;
});
});
</script>
</body>
</html>

Filling table in angular js using ng-repeat

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>

Fill HTML table from JSON object using angular.js

I am trying to get data from json object and using ng-repeat show that data inside of a HTML table.
I am getting data with $http and later using ng-repeat for writing the rows of table.
This is my json object:
{
"tests": [
{
"date": "08/02/1999",
"name": "Test 1",
"test": "Raven"
},
{
"date": "11/09/1998",
"name": "Test 2",
"test": "PCT+"
},
{
"date": "13/01/2005",
"name": "Test 3",
"test": "PCT"
}
]
}
This is how I am trying to get json into angular variable:
var testApp = angular.module('testApp', []);
testApp.controller('TestListCtrl', function ($scope, $http) {
$http.get('GlobalData.json').success(function (data) {
$scope.tests = data;
});
});
And this is my HTML for table:
<script src="batteriesScript.js"></script>
<script src="../scripts/angular.min.js"></script>
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody ng:repeat="t in tests">
<tr>
<td>{{t.date}}</td>
<td>{{t.name}}</td>
<td>{{t.test}}</td>
</tr>
</tbody>
</table>
This is the index page where I have calls to different views depending on which link is clicked. Table content is in first view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
<title>BatteryApp</title>
<meta charset="utf-8" />
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<link href="assets/style.css" rel="stylesheet" />
<script src="scripts/routes.js"></script>
</head>
<body>
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
Battery Application
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
Home
Add new battery
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Battery</b>
</td>
</tr>
</table>
</body>
</html>
Data is not shown on the page and I do not get any exception in browser console.
Second problem I have is that I do not see all files and folders from my solution in Chrome console:
I am missing Batteries folder where is the code I am using for my table and accessing to data.
So practically I am unable to debug it and try to find some errors.
Does anybody have idea how can I solve Chrome problem and does anybody spots potential errors in code for generating HTML table using angular.js?
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="t in tests">
<td>{{t.date}}</td>
<td>{{t.name}}</td>
<td>{{t.test}}</td>
</tr>
</tbody>
</table>
Change the location of the ng-repeat. The row should be repeating, not the table body, right?
As far as the missing folder is concerned, see if you have included the batter.js file in your index.html. Or share your index.html code
It looks like it should be Batteries/batteriesScript.js in the script tag

AngularJS get id of element clicked and use in controller

I just began learning AngularJS, and I am trying to create a pretty simple web application. Right now, I have some users. Each user is displayed in an individual table and each user has its own details which is displayed in a table under it.
$scope.userList = [{username: "Bob_t", detailsId: 1}, {username: "Mike_V", detailsId: 2}];
$scope.userDetails = [{Name: "Bob", Age: 20, id: "1"}, {Name: "Michael", Age: 18, id: "2"}];
You can see that each user has a reference to it's corresponding details (detailsId in userList corresponds to id in userDetails).
Basically, what I'm trying to do is initially have the details table hidden for each user. And when someone clicks the expand button for a specific user, open that user's corresponding details table and populate it with that user's details. What I'm having trouble with is getting the detailsId from the clicked expand button and then using that to query my DB to get the correct user's details to display in the table under it.
<div ng-repeat="user in userList | filter:searchBox">
<div class="uk-panel-box-secondary uk-overflow-container tableDiv uk-margin-large-bottom">
<table class="uk-table uk-table-hover uk-margin-top">
<thead>
<tr>
<th>Username</th>
</tr>
</thead>
</table>
<a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="isOpened=!isOpened; showOrHideDetails(isOpened, param)" ng-class="{'uk-icon-plus-square-o': !isOpened, 'uk-icon-minus-square-o': isOpened}"></a>
</div>
<div class="uk-panel-box-secondary uk-overflow-container uk-margin-top uk-margin-large-left uk-margin-bottom tableDiv">
<table class="uk-table uk-table-hover uk-margin-top">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tr ng-repeat="details in userDetails" id={{user.id}}>
<td>{{details.Name}}</td>
<td>{{details.Age}}</td>
<td>
</td>
</tr>
</table>
</div>
</div>
my controller:
$http({
method : "GET",
url : "http://database:8081/userAccounts/"
}).then(function mySucces(response) {
$scope.userList = response.data;
}, function myError(response) {
// $scope.userList = response.statusText;
});
$scope.showOrHideDetails = function(isOpened, param)
if(isOpened){
console.log($scope.id)
$scope[id] = true;
console.log($scope.id);
$http({
method : "GET",
url : "http://database:8081/details?id=" + index
}).then(function mySucces(response) {
$scope.userDetails = response.data;
}, function myError(response) {
$scope.userDetails = response.statusText;
});
}
else{
$scope.showDetails = false;
}
}
What is really confusing to me is once I get the correct userDetails object after querying the DB, how do I populate the corresponding table with that info?
I know I probably need a model, but this confuses me because the number of users is unknown.
First, your code is a bit confuse..
After each query you're attributing the response (which one is the details of a single user) to the whole array userDetails:
$scope.userDetails = response.data;
While it should be:
$scope.userDetails.push(response.data);
In addition, you have a single variable called isOpened, for sure it won't work, because you have multiple buttons for only 1 variable.
So my suggestion is to change it to:
<a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="showOrHideDetails(user)" ng-class="{'uk-icon-plus-square-o': !user.isOpened, 'uk-icon-minus-square-o': user.isOpened}"></a>
Also you have to check if the userDetail is already in your userDetails array.
Finally, since you want to show the details based on the user, you can use the native filter, because you already have the id property of users in both arrays, as below:
<tr ng-if="user.isOpened" ng-repeat="details in userDetails | filter: { id: user.detailsId }" id={{user.id}}>
A simple demo:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$scope.userList = [{
username: "Bob_t",
detailsId: 1
}, {
username: "Mike_V",
detailsId: 2
}];
$scope.userDetails = [{
Name: "Bob",
Age: 20,
id: "1"
}, {
Name: "Michael",
Age: 18,
id: "2"
}];
$scope.showOrHideDetails = function(user) {
user.isOpened = !user.isOpened;
function mySuccess(response) {
$scope.userDetails.push(response.data);
}
function myError(response) {
console.log(response.statusText);
}
if (user.isOpened) {
$http.get('http://database:8081/details?id=' + user.id)
.then(mySuccess)
.catch(myError);
} else {
$scope.showDetails = false;
}
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="user in userList | filter:searchBox">
<div class="uk-panel-box-secondary uk-overflow-container tableDiv uk-margin-large-bottom">
<table class="uk-table uk-table-hover uk-margin-top">
<thead>
<tr>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-bind="user.username"></td>
</tr>
</tbody>
</table>
<a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="showOrHideDetails(user)" ng-class="{'uk-icon-plus-square-o': !user.isOpened, 'uk-icon-minus-square-o': user.isOpened}"></a>
</div>
<div class="uk-panel-box-secondary uk-overflow-container uk-margin-top uk-margin-large-left uk-margin-bottom tableDiv">
<table class="uk-table uk-table-hover uk-margin-top">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tr ng-if="user.isOpened" ng-repeat="details in userDetails | filter: { id: user.detailsId }" id={{user.id}}>
<td ng-bind="details.Name"></td>
<td ng-bind="details.Age"></td>
<td>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
I hope it helps!!
have you tried passing user from
<div ng-repeat="user in userList | filter:searchBox">
to function showOrHideDetails(user)

Categories