admin管理员组

文章数量:1424363

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;
})

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;
})
  • javascript
  • angularjs
  • json
  • http
Share Improve this question asked Sep 27, 2017 at 9:30 user7138187user7138187 1
  • 1 Your JSON is not valid. All property names must be surrounded with double quotes. – ADreNaLiNe-DJ Commented Sep 27, 2017 at 9:33
Add a ment  | 

2 Answers 2

Reset to default 3

You can use https://jsonlint./ to validate the json. As ADreNaLiNe-DJ mented it is causing issues due to missing quotes

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));

本文标签： javascriptAngularJS39Data must be a valid JSON object39 error when loading via http getStack Overflow

版权声明：本文标题：javascript - AngularJS - 'Data must be a valid JSON object' error when loading via $http get - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745373038a2655817.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。