How to get data from datasource with AngularJS?

Question

Okey, please be patience. I only know jquery and I heard that use AngularJS is something that I should try.

So, what I need to to is visit a page on my local host "../asp/fases/fases-controler.asp" parse the json that this page shows me ( that is something like this: { "fasekind": [ "AAA", "BBB", "CCC" ] } ) and then mount on client side a list like this:

<ul>
   <li><input type="checkbox" /> <label>AAA</label></li>
   <li><input type="checkbox" /> <label>BBB</label></li>
   <li><input type="checkbox" /> <label>CCC</label></li>
</ul>

I do need a help with this. I only know the jQuery way. I have seen so many tutorials but I don't get it. I receive always Uncaught ReferenceError: $http is not defined and other erros messages.

I don't want someone to do that for me, I just need to figure out how it works.

js controller that I try... it does not work at all.

var app = angular.module("app", []);

app.controller("AppCtrl", function ($http) {
    var app = this;
    $http.get("../asp/fases/fases-controler.asp")
        .success(function (data) {
            app.fases = data;
        })

})

var app = angular.module("app", []); app.controller("AppCtrl", function ($http) { var app = this; $http.get("../asp/fases/fases-controler.asp") .success(function (data) { app.fases = data; }) }) — Uder Moreira
– Uder Moreira, Commented Jan 8, 2014 at 20:33
@UderMoreira Please do not use comments to add additional code. Edit your question if needed. Anyway, going through the angular docs and following some official tutorials is a way to go. — Stewie
– Stewie, Commented Jan 8, 2014 at 22:19
I found an answer [here][1], it was missing the JSON parse. [1]: stackoverflow.com/questions/17917238/… — Uder Moreira
– Uder Moreira, Commented Jan 10, 2014 at 15:34

dcodesmith · Accepted Answer · 2014-01-08 21:10:18Z

1

CONTROLLER

var app = angular.module("app", []);

app.controller("AppCtrl", function ($scope, $http) {

    $http.get("../asp/fases/fases-controler.asp")
        .success(function (data) {
            $scope.fases = data;
        });
});

HTML

<div class="grid-12-12" ng-app='currentApp' ng-controller='ACtrl'>
    <label>Fases <em class="formee-req">*</em>
    </label>
    <ul class="formee-list">
        <li ng-repeat="list in fases">
            <input name="checkbox-01" type="checkbox" />
            <label>{{list}}</label>
        </li>
    </ul>
</div>

JSFIDDLE

edited Jan 8, 2014 at 21:10

answered Jan 8, 2014 at 20:40

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Uder Moreira Over a year ago

i got errors.angularjs.org/1.2.7/ng/…

Uder Moreira Over a year ago

Now i have errors.angularjs.org/1.2.7/ng/…

dcodesmith Over a year ago

Do you have the exact same controller and html I posted?

Uder Moreira Over a year ago

html little bit diferent: <div class="grid-12-12" ng-app='app' ng-controller='AppCtrl'> <label>Fases <em class="formee-req">*</em></label> <ul class="formee-list"> <li ng-repeat="list in fases"> <input name="checkbox-01" type="checkbox" /> <label>{{list}}</label> </li> </ul> </div>

dcodesmith Over a year ago

Any luck yet? @UderMoreira

|

Community · Accepted Answer · 2017-05-23 11:57:37Z

I found an answer here, it was missing the JSON parse I guess. This is what I did:

JSON

{
  "fasekind": [ 
              "AAA",
              "BBB",
              "CCC" 
              ]
}

CONTROLLER

function FetchCtrl($scope, $http) {
        $scope.url = 'fases/fases-controler.asp';

        $http.get($scope.url).success(function (data, status) {
            $scope.fasekind = data.fasekind;
        }).error(function (data, status) {
                $scope.response = 'Request failed';
            });
}

HTML

    <div class="grid-12-12" ng-controller='FetchCtrl'>
        <label>Fases <em class="formee-req">*</em>
        </label>
        <ul class="formee-list">
            <li ng-repeat="foo in fasekind">
                <input name="checkbox-01" type="checkbox" />
                <label>{{foo}}</label>
            </li>
        </ul>
    </div>

Collectives™ on Stack Overflow

How to get data from datasource with AngularJS?

2 Answers 2

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related