Load data from json file to angular module - angularjs

I'm trying to load data into my angular module from json file but instead of data i'm getting this.
var app = angular.module('myApp', []);
app.controller("myCtrl",function($scope, $http)
{
$http.get('bookData.json').then(function(response){
$scope.books = response.data;
});
});
And in my view displaying data as:
<body ng-controller="myCtrl">
<div>{{"Book details"}}</div>
<div>
<table>
<tr ng-repeat="x in books">
<td>x.bookid</td>
<td>x.author</td>
</tr>
</table>
</div>
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</body>
</html>
But i'm getting output as:
Book details
x.bookid x.author
x.bookid x.author
x.bookid x.author
x.bookid x.author
https://plnkr.co/edit/ZqcnwOKZUdUo5eDIdjlh?p=preview

You need to wrap your logic with {{ and }} to make it recognisable by angular. Otherwise it'll print out as just plain text.
e.g
<td>{{x.bookid}}</td>
<td>{{x.author}}</td>

<body ng-controller="myCtrl">
<div>
<H1>Book details</H1>
</div>
<div>
<table>
<tr ng-repeat="x in books">
<td>{{x.bookid}}</td>
<td>{{x.author}}</td>
</tr>
</table>

Related

Angular scope variable not getting set

I am a learner in angular JS. I am trying out the $http and set the corresponding value to the scope variable. But It doesnt work. Below is the snippet of the html.
<div ng-app="fileapp" ng-controller="myctl" ng-init="hidevar=true">
<div ng-hide="hidevar" class="ng-hide">
<table>
<tbody ng:repeat="x in dataobj">
<tr><td>{{x.url}}</td></tr>
</tbody>
</table>
</div></div>
below is the success call back script with angular js
success(function(data) {
console.log(data);
var d=angular.fromJson(data);
console.log('d is:'+d.url);
$window.alert(d.url);
$scope.dataobj=data;
//$scope.url=data.url;
$scope.hidevar =false;
I am getting the expected url string value in console.log and also in the window.alert. But the same is not getting refelected in $scope.dataobj=data; and
$scope.hidevar =false;
The ng hidden is not setting to false and also the json data from the service is not getting set to dataobj.
Below is the console output.
I changed the list div like the below but still no luck
<div ng-hide="hidevar" class="ng-hide">
<table>
<tbody>
<tr><td>{{dataobj.url}}</td></tr>
</tbody>
</table>
</div>
I added a hidden section and updated the hidden variable inside the scope but that is not reflecting.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<!--<script src="app.js"></script> -->
</head>
<body ng-app="plnkrApp" ng-controller="DemoController" ng-init="myvar=true">
<h1>Array</h1>
<table>
<tbody ng:repeat="x in array">
<tr>
<td>{{x.url}}</td>
</tr>
</tbody>
</table>
<h1>Object</h1>
<table>
<tbody ng:repeat="x in object">
<tr>
<td>{{x}}</td>
</tr>
</tbody>
</table>
<div ng-hide="myvar">
<p>Hidden Section</p>
</div>
<script>
var app = angular.module('plnkrApp', []);
app
.controller("DemoController", function($scope) {
$scope.array = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
$scope.object = {url: 'test1'};
$scope.myvar=false;
});
</script>
</body>
</html>
The hidden section is not getting displayed. Why the data is not binding to hidden variable?
You're getting an object back, not multiple objects in an array.
Doing ng-repeat on this object would just need {{x}} instead of {{x.url}} but that's not right.
Create a test scope variable with an array of 2 or more of those objects. You'll see that it'll work the way you want.
$scope.test = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
Edit: Here is a Plunkr showing the difference:
http://embed.plnkr.co/6wSuAPHPCSZF60Pph85V/

Angularjs is not displaying update data in table row, ng-repeat not working properly?

I'm trying to get Angular to display JSON data that I've managed to pull from a database and console also printing the data as expected, but table ng-repeat not displaying the data. even outside of the table data display properly. {{contactlists[0].name}}
<!DOCTYPE>
<html ng-app="nodeapp">
<head>
<title>AngularJs with Nodejs</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="nodeappctrl">
<div class="row">
<h1>Angularjs with api's</h1>
<p>{{contactlists[0].name}}</p>
</div>
</div>
<div class="container">
<div class="row">
<table class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlists">
<td>{{$index}}</td>
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script type="text/javascript">
var nodeapp = angular.module('nodeapp', []);
nodeapp.controller('nodeappctrl', ['$scope', '$rootScope', '$log', '$http',
function($scope, $rootScope, $log, $http) {
var contactlist = {};
$http.get('/contactlist').success(function(data) {
$scope.contactlists = data;
//$scope.$apply();
console.log(JSON.stringify($scope.contactlists), null,2);
});
}
]);
</script>
<!--
// dummy data
var contactlists =[
{
name: 'Rajesh',
email: 'raj#g.com',
number: '11 - 111 - 11111'
}, {
name: 'Rajesh2',
email: 'raj2#g.com',
number: '22 - 222 - 222222'
}, {
name: 'Rajesh3',
email: 'raj3#g.com',
number: '33 - 333 - 333333'
}
]-->
</body>
</html>
</html>
Place ng-controller inside the <body> tag.
You used it in the <div> which is closed, so it's can't be available to the rest bottom of the code.
<body ng-controller="nodeappctrl">
//your code here..
</body>
The problem is here:
<div class="container" ng-controller="nodeappctrl">
The nodeappctrl controller should be applied to a tag that is a parent of where you're accessing its scope. As you can see, the table is a child of a sibling of the element the controller is bound to.
For example, move ng-controller="nodeappctrl" to the body tag.

NgMaps Center not working (Dynamic Point)

I'm using NgMaps in my Angular app
I'm trying to give the center point dynamically, but it's taking some other points which is not given by me:
HTML:
<ng-map zoom="5" center="{{center}}" style="height:600px">
</ng-map>
In controller:
$scope.center =[18.9750, 72.8258];
Here's the Plnkr Code:
http://plnkr.co/edit/hbNZdSKuUZqVSsJN7he3?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="style.css">
<!-- JS -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.4.7/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ng-map zoom="8" center="{{center}}" style="height:600px">
<!-- <ng-map zoom="5" center="[20.1450107,77.8764691]" style="height:600px"> -->
<custom-control id="home" position="TOP_RIGHT" index="1000">
<div style="background-color: rgba(0,0,0,.5); color:#fff;width:200px;padding: 10px;" ng-if="customMarkers[0].clustors">
<table class="table table-condensed">
<thead>
<tr>
<th style="width: 50%">Priority</th>
<th style="width: 50%">Color</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in customMarkers[0].clustors">
<td>Priority {{$index}}</td>
<td class="{{clustorcolors[$index]}}"></td>
</tr>
</tbody>
</table>
</div>
</custom-control>
<div ng-repeat="(key, value) in customMarkers[0].clustors">
<div ng-repeat="point in value">
<custom-marker position="{{point.coordinate}}" on-mouseover="clustormouseover()" on-mouseout="clustormouseout()">
<div class="mappointer {{clustorcolors[$parent.$index]}}" ng-click="clickme(key,$index)">
<div class="infobox" id="clustor_{{$parent.$index}}_{{$index}}" ng-show="point.visibility">
BM_M_EXECTIVE : {{point.BM_M_EXECTIVE}},<br>
BM_PROFIT : {{point.BM_PROFIT}},<br>
BM_QUANTITY : {{point.BM_QUANTITY}},<br>
BM_NAME : {{point.BM_NAME}},<br>
BM_DISTRICT : {{point.BM_DISTRICT}},<br>
BM_TOTALPURCHASE : {{point.BM_TOTALPURCHASE}},<br>
</div>
</div>
</custom-marker>
</div>
</div>
</ng-map>
</body>
</html>
I don't know your case, but it seems working fine with me with the following example.
http://plnkr.co/edit/cec5b88WpZcoiSd1Mq28?p=preview
javascript
vm.center = "37.7699298, -122.4469157";
vm.setCenter = function() {
vm.center = "38.7699298, -123.4469157";
}
});
html
center: {{vm.center}}<br/>
<button ng-click="vm.setCenter()">Set Center to "38.7699298, -123.4469157"</button>
</div>
I had the same problem, because ngMap does not recognize the $interpolateProvider (according to #allenhwkim). Solution:
HTML:
<ng-map id="map" zoom="5" style="height:600px"></ng-map>
Javascript:
var that = this;
NgMap.getMap('map').then(function(map) {
that.map = map;
that.map.setCenter(new google.maps.LatLng(18.9750, 72.8258));
});
I hope, it helps someone. Thanks #allenhwkim for ngMap!

bootstrap tooltips not working when using it with angular ng-repeat and angular $interval together

Question: why isn't bootstrap like tooptips working when using it with angular ng-repeat and angular $interval
Behavior I'm seeing: when using bootstrap tooltips with angular ng-repeat and angular $interval, i am seeing the regular tooltips, not bootstrap like tooltips.
What i've tried:
if i use bootstrap tooltips with ng-repeat but disable the $interval, bootstrap tooltip works.
if i use bootstrap tooltips with $interval but remove ng-repeat, bootstrap tooltip works.
in the plunkr i've provided, lines 32, 33, you can disable/enable $interval for testing
http://plnkr.co/edit/6rUeJGsYfkgWMRrZoIYw?p=preview
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({container: 'body', placement: 'bottom'}); // initialize bootstrap tooltips
});
var app = angular.module("test", []);
app.controller("testCtrl", function($scope, $interval) {
var stats = [{
"name": "john",
"stat1": 3,
"stat2": 5
}];
var count = 0;
$scope.getTestInfo = function() {
$scope.count = count++;
$scope.stats = stats;
}
//$scope.getTestInfo(); // if dont use interval, bootstrap tooltip works
$interval(function(){$scope.getTestInfo();}, 1000); // if use interval, bootstrap tooltip doesnt work
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
<table id="table1" class="table table-hover table-condensed">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody class="bg-info">
<tr ng-repeat="stat in stats">
<td data-toggle="tooltip" title="{{count}}">{{stat.name}}</td>
<td data-toggle="tooltip" title="testcolumn2">{{stat.stat1 + count}}</td>
<td data-toggle="tooltip" title="testcolumn3">{{stat.stat2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You can use AngularUI tooltip which does all the work for you. Then your markup would look like this:
...
<tr ng-repeat="stat in stats" style="position: relative">
<td tooltip="{{count}}" tooltip-placement="bottom" tooltip-append-to-body="true">{{stat.name}}</td>
<td tooltip="testcolumn2" tooltip-placement="bottom" tooltip-append-to-body="true">{{stat.stat1 + count}}</td>
<td tooltip="testcolumn3" tooltip-placement="bottom" tooltip-append-to-body="true">{{stat.stat2}}</td>
</tr>
...
See updated plunker.

Simple restangular example broken with AngularJS 1.2

I'm doing a basic Restangular example and it works on AngularJS 1.1, however on 1.2, the REST request is sent, data is received, but the table is not displayed properly.
I read through some threads here about upgrading from 1.1 to 1.2 but I don't see the issue as the example is very simple and does not explicitly use ngRoute, isolated scopes or custom directives.
HTML
<!DOCTYPE html>
<html ng-app="countries">
<head>
<meta charset="utf-8" />
<title>REST Country Example</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//code.angularjs.org/1.2.27/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.27/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdn.rawgit.com/mgonto/restangular/master/dist/restangular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainCtrl">
<div>
<h2>Restangular Example with RESTCountries.eu</h2>
<input type="text" ng-model="search" class="search-query" placeholder="Search">
<table class="table table-responsive table-striped">
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="country in countries | filter:search | orderBy:'name'">
<td>{{country.name}}</td>
<td>{{country.capital}}</td>
<td>{{country.alpha2Code}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JS
app = angular.module('countries', ['restangular']);
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl('http://restcountries.eu/rest/v1');
});
app.controller('mainCtrl', function($scope, Restangular) {
$scope.countries = Restangular.all('all').getList();
});
1.1.5 Plunk (working)
1.2.27 Plunk (not working)
Any idea what is missing/incorrect in order to get this working properly on 1.2?
Cheers,
I have never used restangular before. Looks like it returns a promise for 1.2 version, instead of data, I am able to load the data with this minor modification:
app.controller('mainCtrl', function($scope, Restangular) {
Restangular.all('all').getList().then(function(result) {
$scope.countries = result;
});
});
Plunker

Resources