Wednesday, February 25, 2015

AngularJs append string by comma

  var roomUtiliesstr = '';
        angular.forEach($scope.RoomUtilisitesCollection, function (item) {

            if (item) {
                if (item.value == 'true') {
                    roomUtiliesstr += item.Title + ',';
                    // selectedUtility.push(item.Title);
                    //$scope.view.RoomUtilities.push(item.Title);
                }
            }
        });

Tuesday, February 24, 2015

AngularJs $http

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise with two $http specific methods: success and error.

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });
// Simple POST request example (passing data) :
$http.post('/someUrl', {msg:'hello word!'}).
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Render json in table using AngularJs

1) HTML

<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
    <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
<table>
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
    </tr>
</table>
</div>
</div>
       
2) Controller.js

//Declare json
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    {
    id: 1,
    firstName: "Peter",
    lastName: "Jhons"},
{
    id: 2,
    firstName: "David",
    lastName: "Bowie"}
]));
//end of declaring json

var app = angular.module('myApp', []);//define app MyApp should be equal to  ng-app="myApp" in HTML

//controller will get call from ng-controller="PeopleCtrl"
function PeopleCtrl($scope, $http) {

    $scope.people = [];

    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
            $scope.people = data;
        });

    };

}


Monday, February 23, 2015

JSON Data Types

Number{ "myNum": 123.456 }
A series of numbers; decimals ok; double-precision floating-point format.
String{ "myString": "abcdef" }
A series of characters (letters, numbers, or symbols); double-quoted UTF-8 with backslash escaping.
Boolean{ "myBool": true }
True or false.
Array{ "myArray": [ "a", "b", "c", "d" ] }
Sequence of comma-separated values (any data type); enclosed in square brackets.
Object{ "myObject": { "id": 7 } };
Unordered collection of comma-separated key/value pairs; enclosed in curly braces; properties (keys) are distinct strings.
Null{ "myNull": null }
Variable with null (empty) value.

What JSON looks like


JSON Example reads a menu from myTutorials.txt, and displays the menu in a web page

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + 
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

Older browsers without the support for the JavaScript function JSON.parse() can use the eval() function to convert a JSON text into a JavaScript object:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';



var obj = eval ("(" + text + ")");