user7138187
Reputation:
AngularJS - 'Data must be a valid JSON object' error when loading via $http get
I'm trying to extract data for a list of employees from a json file using a $http.get request in my angular app, but the console is showing the following error:
Error: [$http:baddata] Data must be a valid JSON object. Received: "{......
Not sure what is wrong, but I've not worked with http requests to get json files much before, and I think my json looks fine.
-
JSON:
{
'employees': [
{
id: '21101994',
icon: 'img/1.png',
iconAlt: 'N C Image',
title: 'Mr',
firstName: 'N',
lastName: 'C',
dateOfBirth: '21/10/1994',
niNumber: 'JZ123456D',
jobTitle: 'Web Developer',
department: 'Development',
joinDate: '18/04/2017',
leaveDate: '18/04/2017',
email: '[email protected]',
phonePrimary: '07123 456789',
phoneSecondary: '07123 456789',
menu: 'ncMenu',
employeePayments: [
{
id: 1,
code: 'BASIC',
paymentType: 'Basic Pay',
hours: '123',
zeroiseHours: 'No',
partPay: 'No',
rate: '123.12',
employerPercentage: '99.99',
pay: '123.12',
paymentFrequency: 'Weekly',
startDate: '26/09/2017',
sequence: '50',
employerPension: '',
csaReference: '',
suspend: 'No',
netToGross: 'No',
requiredTotal: '',
paidToDate: '',
protectedNet: '',
arrearsCarried: ''
},
{
id: 2,
code: 'CMA',
paymentType: 'Current Maintenance Assessment',
hours: '99',
zeroiseHours: 'No',
partPay: 'No',
rate: '99.99',
employerPercentage: '99.99',
pay: '99.99',
paymentFrequency: 'Monthly',
startDate: '21/10/1994',
sequence: '4100',
employerPension: '99.99',
csaReference: '999',
suspend: 'Yes',
netToGross: 'No',
requiredTotal: '99.99',
paidToDate: '99.99',
protectedNet: '99.99',
arrearsCarried: '99.99'
},
]
},
{
id: '1',
icon: '',
iconAlt: 'Employee 2 Image',
title: 'Mr',
firstName: 'A',
lastName: 'Z',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Testing',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee2Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 3 Image',
title: 'Mr',
firstName: 'B',
lastName: 'Y',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Marketing',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee3Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 4 Image',
title: 'Mr',
firstName: 'C',
lastName: 'X',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Payroll',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee4Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 5 Image',
title: 'Mr',
firstName: 'Full',
lastName: 'Name',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Marketing',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee5Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 6 Image',
title: 'Mr',
firstName: 'Full',
lastName: 'Name',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Support',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee6Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 7 Image',
title: 'Mr',
firstName: 'Full',
lastName: 'Name',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Project Management',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee7Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 8 Image',
title: 'Mr',
firstName: 'Full',
lastName: 'Name',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Development',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee8Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 9 Image',
title: 'Mr',
firstName: 'X',
lastName: 'C',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Project Management',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee9Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 10 Image',
title: 'Mr',
firstName: 'Y',
lastName: 'B',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Management',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee10Menu'
},
{
id: '12673855',
icon: '',
iconAlt: 'Employee 11 Image',
title: 'Dr',
firstName: 'Z',
lastName: 'A',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Managing Director',
department: 'Management',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee11Menu'
}
]
}
-
Controller:
app.controller('employeesListController', function($scope, $http, $state, $stateParams, employeesService) {
$scope.active = 'active';
$scope.sortEmployeesBy = '+lastName';
$scope.titles = employeesService.getTitles();
$scope.departments = employeesService.getDepartments();
$http.get('js/data/employees.json')
.then(function(response) {
angular.fromJson(response);
$scope.employees = response.data.employees;
})
Upvotes: 2
Views: 8750
Answers (2)
Marko Savic
Reputation: 2384
Or you can use JSON.stringify :
const emp = {
'employees': [
{
id: '21101994',
icon: 'img/1.png',
iconAlt: 'N C Image',
title: 'Mr',
firstName: 'N',
lastName: 'C',
dateOfBirth: '21/10/1994',
niNumber: 'JZ123456D',
jobTitle: 'Web Developer',
department: 'Development',
joinDate: '18/04/2017',
leaveDate: '18/04/2017',
email: '[email protected]',
phonePrimary: '07123 456789',
phoneSecondary: '07123 456789',
menu: 'ncMenu',
employeePayments: [
{
id: 1,
code: 'BASIC',
paymentType: 'Basic Pay',
hours: '123',
zeroiseHours: 'No',
partPay: 'No',
rate: '123.12',
employerPercentage: '99.99',
pay: '123.12',
paymentFrequency: 'Weekly',
startDate: '26/09/2017',
sequence: '50',
employerPension: '',
csaReference: '',
suspend: 'No',
netToGross: 'No',
requiredTotal: '',
paidToDate: '',
protectedNet: '',
arrearsCarried: ''
},
{
id: 2,
code: 'CMA',
paymentType: 'Current Maintenance Assessment',
hours: '99',
zeroiseHours: 'No',
partPay: 'No',
rate: '99.99',
employerPercentage: '99.99',
pay: '99.99',
paymentFrequency: 'Monthly',
startDate: '21/10/1994',
sequence: '4100',
employerPension: '99.99',
csaReference: '999',
suspend: 'Yes',
netToGross: 'No',
requiredTotal: '99.99',
paidToDate: '99.99',
protectedNet: '99.99',
arrearsCarried: '99.99'
},
]
},
{
id: '1',
icon: '',
iconAlt: 'Employee 2 Image',
title: 'Mr',
firstName: 'A',
lastName: 'Z',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Testing',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee2Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 3 Image',
title: 'Mr',
firstName: 'B',
lastName: 'Y',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Marketing',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee3Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 4 Image',
title: 'Mr',
firstName: 'C',
lastName: 'X',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Payroll',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee4Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 5 Image',
title: 'Mr',
firstName: 'Full',
lastName: 'Name',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Marketing',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee5Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 6 Image',
title: 'Mr',
firstName: 'Full',
lastName: 'Name',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Support',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee6Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 7 Image',
title: 'Mr',
firstName: 'Full',
lastName: 'Name',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Project Management',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee7Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 8 Image',
title: 'Mr',
firstName: 'Full',
lastName: 'Name',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Development',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee8Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 9 Image',
title: 'Mr',
firstName: 'X',
lastName: 'C',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Project Management',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee9Menu'
},
{
id: '',
icon: '',
iconAlt: 'Employee 10 Image',
title: 'Mr',
firstName: 'Y',
lastName: 'B',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Job Title',
department: 'Management',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee10Menu'
},
{
id: '12673855',
icon: '',
iconAlt: 'Employee 11 Image',
title: 'Dr',
firstName: 'Z',
lastName: 'A',
dateOfBirth: '01/01/2000',
niNumber: 'JZ123456D',
jobTitle: 'Managing Director',
department: 'Management',
joinDate: '01/01/2017',
leaveDate: '01/01/2017',
email: '[email protected]',
phonePrimary: '07000 123456',
phoneSecondary: '0151 123456',
menu: 'employee11Menu'
}
]
};
console.log(JSON.stringify(emp, null, 2));Upvotes: 0
L.H
Reputation: 81
You can use https://jsonlint.com/ to validate the json. As ADreNaLiNe-DJ commented it is causing issues due to missing quotes
Upvotes: 3
Related Questions
- Angular error when trying to retrieve JSON
- Angular Json Http Get - Not load
- Error while parsing JSON response using $http
- Angular 1.6 $http.get unable to read from json
- AngularJS Failing to Load JSON?
- AngularJS and $http get JSON - data is not defined
- Angular Load Json Error
- AngularJS $http.get returns undefined
- Angular $http.get DATA - XMLHttpRequest cannot load
- $http.get returning malformed data