#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    151
    Rep Power
    19

    Beginner Angular Question


    So i just finished writing a calendar app. The app makes an ajax call, gets some JSON and i used JQuery to update the DOM. Not too bad but i've been looking at Angular lately and wondered how easy it would be to replicate.

    I setup a little test just to get a feel for it. It works and it is quite easy to do. Letting Angular update the DOM is great! My only problem is it's returning my data still formatted.

    so when {{mydata.title}} gets returned it looks like this ["Lego"]. Am i doing something wrong? I thought it would strip the JSON formatting and just leave the title Lego.

    Any suggestions to help guide me through this would be great. Not bad for a first stab at it though.

    Html:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
        <script src="/Angular/MyApp/js/main.js"></script>
    </head>
    
    <body ng-app="myapp">
        <div ng-controller="MyController" >
            <button ng-click="myData.doClick(item, $event)">Send AJAX Request</button>
            <br/>
            Title: {{myData.title}}<br />
    
            Description: {{myData.description}}
        </div>
    </body>
    
    </html>
    JS
    Code:
     angular.module("myapp", [])
            .controller("MyController", function($scope, $http) {
                $scope.myData = {};
                $scope.myData.doClick = function(item, event) {
    
                    var responsePromise = $http.get("/foundation/cfc/calendar.cfc?method=getevent&eventid=254");
    
                    responsePromise.success(function(data, status, headers, config) {
                        $scope.myData.title = data.DATA.TITLE;
                        $scope.myData.description = data.DATA.DESCRIPTION;
                    });
                    responsePromise.error(function(data, status, headers, config) {
                        console.log("FAILED");
                        alert("AJAX failed!");
                    });
                }
            } );
    JSON that gets returned
    Code:
    {
    ROWCOUNT: 1,
    COLUMNS: [
    "DATESTART",
    "TIMESTART",
    "TIMEEND",
    "EVENTDETAILID",
    "LOCATION",
    "EVENTID",
    "EVENTSEATS",
    "TITLE",
    "DESCRIPTION",
    "ID",
    "IMAGE",
    "NAME",
    "BRANCH_NAME",
    "BRANCH_LINK",
    "STREET",
    "CITY",
    "PHONE",
    "LAT",
    "LNG"
    ],
    DATA: {
    DATESTART: [
    "June, 20 2015 00:00:00"
    ],
    TIMESTART: [
    "January, 01 1970 09:45:00"
    ],
    TIMEEND: [
    "January, 01 1970 10:00:00"
    ],
    EVENTDETAILID: [
    161
    ],
    LOCATION: [
    "6"
    ],
    EVENTID: [
    254
    ],
    EVENTSEATS: [
    0
    ],
    TITLE: [
    "Lego"
    ],
    DESCRIPTION: [
    "This is my test Lego program"
    ],
    ID: [
    161
    ],
    IMAGE: [
    "lego-movie-poster-1970s-astronaut-570x350.jpg"
    ],
    NAME: [
    "Adult"
    ],
    BRANCH_NAME: [
    "Main"
    ],
    BRANCH_LINK: [
    "http://www.guelphpl.ca/locations/main.cfm"
    ],
    STREET: [
    "100 Norfolk Street"
    ],
    CITY: [
    "Guelph N1H 4J6"
    ],
    PHONE: [
    "(519) 824-6220"
    ],
    LAT: [
    "43.5456557"
    ],
    LNG: [
    "-80.2529"
    ]
    }
    }
    Last edited by dsfx; June 26th, 2015 at 02:43 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    151
    Rep Power
    19
    I figured it out.

    Since the data returned is an array in my presentation i need to reference .join.

    Code:
    <body ng-app="myapp">
        <div ng-controller="MyController" >
            <input type="text" ng-model="query" ng-change="myData.doUpdate(query, $event)" id="test-ng-change" value=""/>
    
            <br/>
            Title: {{test.TITLE.join(", ")}}<br />
    
            Description: {{test.DESCRIPTION.join(", ")}}
        </div>
    </body>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2017
    Posts
    1
    Rep Power
    0
    There are various tutorials available in different formats. Some of them are in the video format while some are in text format. Some tutorials are free of charge while some of them are paid ones. All these tools which are useful to understand offshore AngularJS development .

IMN logo majestic logo threadwatch logo seochat tools logo