Create local json in Codepen for AngularJS

Question

The following tutorial points to an external json file. But it is blocked by CORS policy. How can I declare the object locally in order to populate the web table? Codepen: https://codepen.io/centem/pen/Rwbmmdy Thank you.

var app = angular.module('myApp', []);
    app.controller('myController',
        function ($scope, $http) {

            var request = {
                method: 'get',
                url: 'https://www.encodedna.com/angularjs/tutorial/birds.json',
                dataType: 'json',
                contentType: "application/json"
            };

            $scope.arrBirds = new Array;

            $http(request)
                .success(function (jsonData) {
                    $scope.arrBirds = jsonData;
                    $scope.list = $scope.arrBirds;
                })
                .error(function () {

                });
        });

The `dataType` and `contentType` properties are not used by the `$http` service. The `.success` method has been [removed from the AngularJS framework](https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). — georgeawg, Sep 30 '19 at 22:35

score 1 · Accepted Answer · answered Sep 30 '19 at 08:13

1

Simply declare the variable you want with the json data:

$scope.list = [
{
   "ID": "001",
   "Name": "Eurasian Collared-Dove",
   "Type": "Dove"
},
{
    "ID": "002",
    "Name": "Bald Eagle",
    "Type": "Hawk"
},
{
    "ID": "003",
    "Name": "Cooper's Hawk",
    "Type": "Hawk"
},
{
    "ID": "004",
    "Name": "Bell's Sparrow",
    "Type": "Sparrow"
},
{
    "ID": "005",
    "Name": "Mourning Dove",
    "Type": "Dove"
},
{
    "ID": "006",
    "Name": "Rock Pigeon",
    "Type": "Dove"
},
{
    "ID": "007",
    "Name": "Abert's Towhee",
    "Type": "Sparrow"
},
{
    "ID": "008",
    "Name": "Brewer's Sparrow",
    "Type": "Sparrow"
},
{
    "ID": "009",
    "Name": "Canyon Towhee",
    "Type": "Sparrow"
},
{
    "ID": "010",
    "Name": "Black Vulture",
    "Type": "Hawk"
}];

answered Sep 30 '19 at 08:13

Bill P

3,622
10
20
32

Thank you for the feedback Bill P. The data is still not reflected in the view. I'm I still missing something else? – sgoodman Sep 30 '19 at 08:20
It should work for you. Check here: [link](https://codepen.io/papadon1/pen/vYBwqeQ) – Bill P Sep 30 '19 at 08:23
1

Thanks Bill P. It works. I had to get rid of the other js that was part of the tutorial. – sgoodman Sep 30 '19 at 08:27

Create local json in Codepen for AngularJS

1 Answers1