0

I am having trouble understanding what I am doing wrong with importing json data into my application. I dont see any get calls in the console tools and I keep getting a $injector:unpr error. I have written this code in the controller.js

  function caderror($scope, SampleData) {

        // Run method getFullList() from factory
        SampleData.getFullList().success(function(data){

            // Assign data to $scope
            $scope.dataFromFactory = data;
        });

    }

and here is factories.js where the sample data is reffering to.

function SampleData($http) {

        // Return the object
        return {

            // Create simple method to get data from $http service
            getFullList : function() {
                return $http({
                    url: 'http://somewebsite/api/example.json',
                    method: 'GET'
                })
            }
        }

    }



angular
    .module('inspinia')
    .factory('SampleData', SampleData);

Here is the HTML I am using to call the JSON data into a table

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>CAD Error Logs</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Tables</a>
            </li>
            <li class="active">
                <strong>Data Tables</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="text-center m-t-lg">
                <h1>
                    Simple factory to get data from server
                </h1>
            </div>
        </div>
        <div class="col-lg-6 col-lg-offset-3">

            <div class="ibox">
                <div class="ibox-content">

                    <p class="text-center">
                        Table with data from api/example.json
                    </p>

                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>
                                Id
                            </th>
                            <th>
                                Name
                            </th>
                            <th>
                                Company
                            </th>
                            <th>
                                Description
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in dataFromFactory">
                            <td>
                                {{item.id}}
                            </td>
                            <td>
                                {{item.name}}
                            </td>
                            <td>
                                {{item.company}}
                            </td>
                            <td>
                                {{item.desc}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

What am i doing wrong and if any more code is needed please let me know and i will post it. I read up on the error and it says it caused by being unable to resolve a required dependency. How would I go about fixing this. the error site of angular js didnt really help me.


EDIT

Here is the error message

Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=SampleDataProvider%20%3C-%20SampleData%20%3C-"aderror

I could show the rest but they are just file lines in angular.min.js

georgeawg
  • 48,608
  • 13
  • 72
  • 95
GoldenWest
  • 281
  • 2
  • 4
  • 16
  • 2
    angular tag is for Angular 2+ This looks like AngularJS - the older version – JGFMK Jul 25 '17 at 20:37
  • yes it is! I will untag the tag for angular 2 – GoldenWest Jul 25 '17 at 20:37
  • If changing the service code doesn't work, can you post the entire error message including the url that it contains? – Mike Feltman Jul 25 '17 at 20:42
  • please post the error message you are getting. "I read up on the error" doesn't tell us anything about the problem. – Claies Jul 25 '17 at 20:42
  • ok I will post it. It is very long tho lol – GoldenWest Jul 25 '17 at 20:43
  • 2
    also, you should consider not using `.success`, it is deprecated. https://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6 – Claies Jul 25 '17 at 20:43
  • if possible, use angular.js rather than angular.min.js, which will produce a more readable and probably shorter error message. – Claies Jul 25 '17 at 20:44
  • awesome ok thanks, when you say rather use angular.js what are you referring to. Sorry very nooby trying to learn as much as I can . Will post the error message now – GoldenWest Jul 25 '17 at 20:46
  • 1
    I am referring to ` – Claies Jul 25 '17 at 20:47
  • ahhh ok will do that now – GoldenWest Jul 25 '17 at 20:48
  • from that error, it looks like maybe you didn't include the file that has `SampleData` in the scripts? it's hard to tell since you aren't showing which files this code is in, or which files (and which order) they are included in your HTML. – Claies Jul 25 '17 at 20:49
  • I tried posting a plunkr but there was so many files I didnt want to overwhelm people with data. Basically I know the JSON file is there because I put it there however in the console for mozilla im not seing a get request for the example.json any idea why that may be? – GoldenWest Jul 25 '17 at 20:51
  • Here is the error using angular.js – GoldenWest Jul 25 '17 at 20:53
  • "Error: [$injector:unpr] Unknown provider: SampleDataProvider <- SampleData <- caderror http://errors.angularjs.org/1.5.0/$injector/unpr?p0=SampleDataProvider%20%3C-%20SampleData%20%3C-"aderror – GoldenWest Jul 25 '17 at 20:53
  • Also any other files that you would like to see let me know and I will post it as a edit to the original question – GoldenWest Jul 25 '17 at 20:54
  • 1
    not the JSON file; the file you refer to here as `factories.js`; where in your HTML is the ` – Claies Jul 25 '17 at 20:55
  • 2
    the function `caderror` is looking for `SampleData` but can't find it, which generally means the code for `SampleData` isn't included (the script is missing) or the script is in the wrong order. – Claies Jul 25 '17 at 20:57
  • YAYYYYY!!!!!! so i feel very dumb but I am so grateful for all your help. I did not have the script include in index.html -__- its been a long day – GoldenWest Jul 25 '17 at 20:59
  • if you want to post the answer as include script in index.html i will accept it – GoldenWest Jul 25 '17 at 21:00

1 Answers1

1

This error commonly occurs due to a problem with your <script> references.

The error is telling us that the function caderror is looking for SampleData but can't find it. This most commonly occurs when the file containing the code for SampleData is not included in the <script> references, or is listed after the file that needs it (the file with caderror in it, in this case).

Also, you should consider not using .success() in your methods, since it has been deprecated. See Why are angular $http success/error methods deprecated? Removed from v1.6?

Claies
  • 22,124
  • 4
  • 53
  • 77