SOLVED:
This is my first effort to try out REST with AngularJS to display the location of the user and some required data (nested items) from the JSON data.
I am hitting this URL: http://muslimsalat.com/daily.json?callback=JSON_CALLBACK
I need to show the below data in a list way which is a nested item:
"items":[
{
"date_for": "2014-5-5",
"fajr": "4: 10am",
"shurooq": "5: 36am",
"dhuhr": "12: 15pm",
"asr": "3: 43pm",
"maghrib": "6: 55pm",
"isha": "8: 25pm"
}]
and also the below information to show the location.
{
"city": "XX",
"country": "XX",
}
AngularJS:
var App = angular.module('MyRESTApp',[]);
App.controller("myRestCntrl",function ($scope, $http) {
var locationURL = "http://muslimsalat.com/daily.json" + "?callback=JSON_CALLBACK";
$http.jsonp(locationURL).
success(function(data)
{
$scope.myLocation = data;
});
});
HTML:
<div ng-app="MyRESTApp">
<div ng-controller="myRestCntrl">
//ng-repeat here for items
<ul>
<li>Date:{{}}</li>
<li>Fajr:{{}}</li>
//more li
</ul>
</div>
</div>
Please let me know how can I loop through nested items and location for the above JSON URL.
You're looking for ng-repeat. Please read and follow the examples on:
https://docs.angularjs.org/api/ng/directive/ngRepeat
If you're still having trouble, please set up a plunker so we'll see what's wrong.
Solved:
<div class="container" ng-controller="namazTimesCtrl">
<ul ng-repeat="item in myLocation.items">
<li>
Date - {{item.date_for}}
</li>
<li>
Fajr - {{item.fajr}}
</li>
</ul>
</div>
Related
I'm trying to make a get request and display the json data.
Here is the html div tag where the data should be displayed:
<div ng-app="app" ng-controller="searchController">
<ul>
<li ng-repeat="name in datas">
{{ name }}
</li>
</ul>
</div>
And here is the app:
var app = angular.module('app', [
]);
app.factory('getRequest', ($http) => {
function get() {
return $http.get('http://localhost:8080/imagedata/')
.then((response) => {
console.log(response.data);
return response.data;
},
(error) => {
return error.statusText;
});
}
return {
get: get
}
});
app.controller('searchController', ['$scope', 'getRequest', ($scope, getRequest) => {
$scope.datas = getRequest.get();
}]);
Inside factory I have a console.log. The data is shown in console, but not in html view. I can't explain what is happening. The code should be works fine.
It's a little hard to tell what the solution is without seeing your console data. If the data ('datas') displayed in your console is an array of objects, for example something like this...
[
{customerId: '123', name: 'Person1', city: "Toronto"},
{customerId: '456', name: 'Person2', city: "Los Angeles"},
{customerId: '789', name: 'Person3', city: "New York"}
]
you'll want to name the specific properties, like this..
<div ng-app="app" ng-controller="searchController">
<ul>
<li ng-repeat="item in datas">
{{item.name}} <--------------
{{item.customerId}}
{{item.city}}
</li>
</ul>
</div>
I found the solution. As #user2864740 said, in my code I've returned the promise, not a good practice. Passing a promise into ngRepeat here is the solution
I would like to download a response on a server in JSON which contains the attribute to populate my select list. I would like to do it with AngularJS and I'm using Angular 2.
Nothing appears, I think the problem is on my attribute ng-repeat :
<div id="myDiv">
<div ng-app="d3DemoApp">
<div ng-controller="AppCtrl">
<div ng-repeat="n in filters track by $index">
{{n}}
</div>
</div>
</div>
</div>
This is my controller :
angular.module('d3DemoApp',[])
.controller('myCtrl',function($scope) {
$scope.notes = userService.getData();
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "releaseFilter");
myDiv.appendChild(selectList);
selectList.setAttribute("class", "form-control");
selectList.setAttribute("onclick", "myFunction()");
//Create and append the options
for (var i = 0; i < $scope.notes.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = $scope.notes[i];
selectList.appendChild(option);
}
});
This is the service which should download the response :
app.service("userService",["$http",
function($http) {
_this = this;
this.getData = function() {
},
$http.get('./dataOnServer.json'). // This adress is normally an HTTP adress which send me the JSON
success(function(data) {
return data;
});
}
]);
This is an online example of the problem with Plunker : https://plnkr.co/edit/du7sU8bhg2G3X7HckbV9?p=preview
I hope you will can help me, thanks a lot !
I would point out that you are repeating filters when you are not defining such variable in your scope or anywhere? You should probably repeat $scope.notes so it would go like this:
<div id="myDiv">
<div ng-app="d3DemoApp">
<div ng-controller="AppCtrl">
<div ng-repeat="n in notes track by $index">
{{n}}
</div>
</div>
</div>
</div>
EDIT:
And you can do a select like this:
<select>
<option ng-repeat="n in notes">{{n.value}}</option>
</select>
And your JSON is invalid. It should be like this for the repeat:
[{value: "value 1"},{value: "value 2"},{value: "value 3"}]
Aim :- To display only Single Object data.
Do I have to use ng-repeat to get the object ?
I'm relatively new to angular. Is there a better way to do this?
Html View :-
<div ng-controller="dashboardController">
<div ng-repeat="person in persons">
<span class="name">{{person.name}}</span>
<span class="title">{{person.title}}</span>
</div>
</div>
Controller Code :-
.controller('dashboardController', ['$scope', function(scope){
scope.persons = [
{
name:"George Harrison",
title:"Goof Off extraordinaire"
}
];
}])
UPDATE FOR MY FELLOW NOOBS, array vs single data set:
scope.persons = [ <-- that creates an array. Cant believe I forgot that.
scope.persons = { <-- that creates a single data set
scope.persons is an array so you have to use ng-repeat.
if you your data is an object, you don't need to use ng-repeat.
ex:
your controller
.controller('dashboardController', ['$scope', function(scope){
scope.person ={
name:"George Harrison",
title:"Goof Off extraordinaire"
}
}]);
so your html:
<div ng-controller="dashboardController">
<div>
<span class="name">{{person.name}}</span>
<span class="title">{{person.title}}</span>
</div>
This can serve your cause with current Json Structure :
<div ng-controller="dashboardController">
<div>
<span class="name"> {{persons[0].name}} </span>
<span class="title"> {{persons[0].title}} </span>
</div>
</div>
Normally if you were only getting one item , it would be an object
$scope.beatle = {
name:"George Harrison",
title:"Goof Off extraordinaire"
}
then reference that directly in view
{{beatle.name}}
I apologize for this simple question. I've been scouring other questions and still can't get it to work.
I have a function returning some key/value pairs
function(data){
console.log(data.message);
}
Returns...
Object {name: "mpierce486", body: "asfsf", time: "1 second ago"}
I have the following when not logging to console...
$scope.message = data.message
Lastly, here's the markup. I'm using a Laravel app so I'm escaping the {{ with #. Nothing shows up and I know it's a simple mistake. Please assist! Thanks!
<div ng-app="myApp" ng-controller="messageCtrl">
<div ng-repeat="x in message" class="main-user-post">
<h1>#{{ x.body }}</h1>
</div>
</div>
I don't think you can do an ng-repeat on an object. Since it's already an object, not an array, you can access it directly, without ng-repeat.
<div ng-app="myApp" ng-controller="messageCtrl">
<div class="main-user-post">
<h1>#{{ message.body }}</h1>
</div>
</div>
your message variable is an object, not an array. So in your iteration, x will take the value of each object properties (body, name, time).
So either use a different approach, or transform your message to an array:
$scope.message = [data.message];
you can iterate through object properties with angular like this:
<div ng-app="myApp" ng-controller="messageCtrl">
<div ng-repeat="(key, value) in message" class="main-user-post">
<h1>#{{value}}</h1>
</div>
</div>
Create object array as below.
JSFiddle - https://jsfiddle.net/L7k6g7ua/ for reference w.r.t AngularJs -
Hope this helps!
<body ng-app="SampleApp">
<div ng-controller="messageCtrl">
<div ng-repeat="m in message" class="main-user-post">
<h1>{{m.body}}</h1>
</div>
</div>
</body>
var sampleApp = angular.module("SampleApp", []);
sampleApp.controller('messageCtrl', function($scope) {
var myObject = {
name: "mpierce486",
body: "asfsf",
time: "1 second ago"
};
var myArray = [];
myArray.push(myObject);
$scope.message = myArray;
});
What I mean is, say I have this HTML:
<ul ng-controller="ContactsCtrl">
<li ng-repeat="contact in contacts">
<div class="name">{{name}}</div>
<div class="email">{{email}}</div>
</li>
</ul>
This works just fine if I initialize the contacts collection from JavaScript:
app.controller('ContactsCtrl', ['$scope', function($scope) {
$scope.contacts = [
{ name: 'Dan', email: 'dan#example.com' },
{ name: 'Bob', email: 'bob#example.com' }
];
}]);
What if, instead, I want to initialize the contents of the collection from the HTML side? Something like:
<ul ng-controller="ContactsCtrl" ng-model="contacts">
<li>
<div class="name" ng-bind="name">Dan</div>
<div class="email" ng-bind="email">dan#example.com</div>
</li>
<li>
<div class="name" ng-bind="name">Bob</div>
<div class="email" ng-bind="email">bob#example.com</div>
</li>
</ul>
And then from JavaScript I would have $scope.contacts initialized based on what I have in the HTML.
Is this possible?
you can do a ng-init="" in your html to initialize a variable or sets of variables but that doesn't seem to be quite what your asking. Why would you want your second example? What are you trying to do with it?
Rather use jQuery and parse HTML DOM, if You have at least... 500 records, other way is 'copy and paste' - it will be faster.
Here is short info 'how it works'
Tutorial