I am new in AngularJS and I am fetching a data from a Rest API, sample data is given below.
{
"error": false,
"videos": [
{
"video_category": "ABC Category",
"title": "Test Video",
"video_links": [
{
"id": 1,
"video_link": "https://www.youtube.com/embed/bNI4Jws68m0"
},
{
"id": 3,
"video_link": "https://www.youtube.com/embed/tB8tACPZ4pc"
}
],
"video_tags": [
{
"id": 1,
"name": "ABC Tag"
},
{
"id": 3,
"name": "DEC Tag"
}
]
},
{
"video_category": "XYZ Category",
"title": "My Test Video",
"video_links": [
{
"id": 2,
"video_link": "https://www.youtube.com/embed/6SS3tK1NMsE"
}
],
"video_tags": [
{
"id": 2,
"name": "GDF Tag"
}
]
}
],
"status_code": 200
}
My AngularJS code is below.
var myApp = angular.module('myApp', []);
myApp.
controller("AppController", function($scope, $http) {
var url = 'http://example.com/api/';
// Get Service for Free Education Page
$http.get(url+'my_api_url').
then(function(response) {
$scope.videos = response.data.videos;
});
});
My HTML Code is below.
<section ng-repeat="video in videos">
<h5>{{ video.video_category }}</h5>
<ul>
<li ng-repeat="links in video.video_links">
<div class="embed-responsive embed-responsive-16by9">
<object
data="{{ links.video_link }}">
<param name="movie" value="{{ links.video_link }}">
<param name="allowFullScreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" value="true"></param>
</object>
</div>
</li>
</ul>
<ul class="list-inline Tags">
<li ng-repeat="tag in video.video_tags">{{ tag.name }}</li>
</ul>
</section>
Now My Issue is that everything is work fine. but Allowfullscreen did not work. When I click on full screen option it is giving Full Screen is Unavailable I am trying but unfortunately unable to resolve this issue.
Really appreciated if anyone can help.
Thanks
Related
through ng-repeat I want to plot videos in a defined order according to the id number (from 1 to 5).
<div ng-app="myApp" ng-controller="Ctrl">
<div ng-repeat="vidObj in videoObjects | orderBy: 'id'">
<span>{{vidObj.id}}</span>
</div>
</div>
I try to apply the filter orderBy, but apparently is not working properly. Do you have an idea of what I am doing wrong? This is a JSfiddle with the complete code.
Thanks in advance for your replies!
EDIT: Thank you for your replies, but the json file can not change.
The Javascript :
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.videoObjects = {
"Frank": {
"id": 1
},
"Gerard": {
"id": 2
},
"Rein": {
"id": 3
},
"Ida": {
"id": 4
},
"Ellen": {
"id": 5
}
};
$scope.arr = Object.keys($scope.videoObjects).map(function(k) { return $scope.videoObjects[k] });
console.log($scope.arr);
});
and the HTML
<div ng-app="myApp" ng-controller="Ctrl">
<div ng-repeat="vidObj in arr | orderBy: 'id'">
<span>{{vidObj.id}}</span>
</div>
</div>
I updated your fiddle with this code.. It is working well.
Here is the link http://jsfiddle.net/tirthrajbarot/fc16op6u/39/
I modified your Json and it works
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.videoObjects = [
{
"name": "Frank",
"id": "1"
},
{
"name": "Gerard",
"id": "2"
},
{
"name": "Rein",
"id": "3"
},
{
"name": "Ida",
"id": "4"
},
{
"name": "Ellen",
"id": "5"
}
]
});
I think that the built-in orderBy filter works with arrays.
The documentation says "The collection can be an Array or array-like object (e.g. NodeList, jQuery object, TypedArray, String, etc)."
Check this example in the documentation that says "Example Ordering a table with ngRepeat".
Try a valid json, somthing like:
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.videoObjects = [
{
"id": 1,
"Frank":'name'
},
{
"id": 2,
"Gerard":'name'
}
];
});
working fiddle
Here is the code
APP.js
.state('app.aboutus', {
url: '/aboutus',
views: {
'mainContent': {
templateUrl: 'templates/aboutus.html',
controller: 'AboutController',
resolve: {
leaders: ['corporateFactory', function(corporateFactory){
return corporateFactory.query();
}]
}
}
}
})
Controller.js
.controller('AboutController', ['$scope', 'leaders', 'baseURL', function($scope, leaders, baseURL) {
$scope.baseURL = baseURL;
$scope.showLeaders = false;
$scope.message="Loading ...";
$scope.leaders = leaders;
console.log($scope.leaders);
}])
Aboutus.html
<ion-view view-title="About Us">
<ion-content>
<div class="card">
<div class="list list-inset">
<div ng-repeat="leaders in leadership" class="item item-avatar item-text-wrap">
<h2>{{leaders.name}}</h2>
<h4>{{leaders.designation}}</h4>
</div>
</div>
</div>
</ion-content>
</ion-view>
db.json
"leadership": [
{
"id": 0,
"name": "Human 1",
"designation": "Chief Executive Officer"
},
{
"id": 1,
"name": "Human 2",
"designation": "Chief Food Officer"
},
{
"id": 2,
"name": "Human 3",
"designation": "Chief Taste Officer"
},
{
"id": 3,
"name": "Human 4",
"designation": "Executive Chef"
}
]
When I checked using inspect element - console tab in Google Chrome, the $resolved: has successfully changed from false into true, and every array contain the information per ID.
But, the data didn't show in the aboutus.html
Did I typed something wrong? or maybe I'm using a wrong method?
Thank you in advance!
Your problem is likely that your ng-repeat syntax is incorrect. Where you have leadership, that should be the object/array you're referencing in your scope. So try changing it to this:
<div ng-repeat="leader in leaders" class="item item-avatar item-text-wrap">
<h2>{{leader.name}}</h2>
<h4>{{leader.designation}}</h4>
</div>
I just started working on a new project which was started.
The last dev was using vm, and I need to print some data
Here I have the ctrl
(function () {
'use strict';
angular
.module('palpatine')
.controller('RotationsCtrl', RotationsCtrl);
/* #ngInject */
function RotationsCtrl (Rotations, $rootScope, $state) {
/*jshint validthis: true */
var vm = this;
vm.data = Rotations;
console.log(vm.data);
}
})();
than console.log(vm.data) returns an obj like this
[{
"_id": "5653e0fee890e41700946a75",
"name": "Mtg Rotation 112415 - SR",
"group": {
"_id": "563166b302d8831700dfc707",
"object_name": "rotation",
"name": "Mortgage",
"__v": 0,
"updated_on": "2015-10-29T00:22:11.868Z",
"created_on": "2015-10-29T00:22:11.868Z"
}, {
"_id": "5653e0fe946a75",
"name": "Mtg Rotation 112415 - JR",
"group": {
"_id": "700dfc707",
"object_name": "rotation 2",
"name": "Home Mortgage",
"__v": 7,
"updated_on": "2015-10-29T00:22:11.868Z",
"created_on": "2015-10-29T00:22:11.868Z"
}]
all I need is to render that data.name in an ul - li
let's say like this
<ul class="dropdown-menu" dropdown-menu>
<li ng-repeat="datum in vm.data.name">
{{datum}}
</li>
</ul>
what can I do ?
You should loop through a vm.data then print name from the each object like datum.name.
Markup
<ul class="dropdown-menu" dropdown-menu>
<li ng-repeat="datum in vm.data">
{{datum.name}}
</li>
</ul>
I am in a process of learning angularJS and I am stuck with accessing the values from the objects I want, in JSON file. Now, I searched the internet for answers, but all I got are really simple examples which I cannot apply in this case.
Here are the screenshots of my tries. The only one that worked out is when I accessed an array of objects, but when I wanted to access values from an object that is not in an array, I could not manage to do it properly.
I want to access and display only values from the object "main":
{"temp":293.01,"pressure":1019,"humidity":60,"temp_min":290.15,"temp_max":296.15}
Here's the JSON file:
{
"id": 2643743,
"name": "London",
"cod": 200,
"coord": {
"lon": -0.13,
"lat": 51.51
},
"weather": [{
"id": 800,
"main": "Clear",
"description": "Sky is Clear",
"icon": "01n"
}],
"base": "stations",
"main": {
"temp": 293.01,
"pressure": 1019,
"humidity": 60,
"temp_min": 290.15,
"temp_max": 296.15
},
// etc...
}
The following three examples didn't work:
<div>
<h1 align="center">Customer List</h1>
<div class="forecast">
<div ng-repeat="x in fiveDay">
<div class="first">
<p>{{ x.main.temp }}</p>
<p>{{ x.main.pressure }}</p>
<p>{{ x.main.humidity }}</p>
</div>
</div>
</div>
</div>
<div>
<h1 align="center">Customer List</h1>
<div class="forecast">
<div ng-repeat="x in fiveDay.main">
<div class="first">
<p>{{ x.temp }}</p>
<p>{{ x.pressure }}</p>
<p>{{ x.humidity }}</p>
</div>
</div>
</div>
</div>
<div>
<h1 align="center">Customer List</h1>
<div class="forecast">
<div ng-repeat="x in fiveDay">
<div class="first">
<p>{{ x.temp }}</p>
<p>{{ x.pressure }}</p>
<p>{{ x.humidity }}</p>
</div>
</div>
</div>
</div>
The last one displayed the wanted info in a div, but it rendered 10 empty divs as well, so I guess that counts as a fail as well.
I would highly appreciate some assistance.
Edit:
This is my JavaScript file:
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
scotchApp.factory('forecast', ['$http', function($http) {
return $http.get('http://api.openweathermap.org/data/2.5/weather?q=London,uk')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', ['$scope', 'forecast', function($scope, forecast) {
forecast.success(function(data) {
$scope.fiveDay = data;
});
}]);
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
I uploaded the app on the web for the sake of exercise:
http://www.freegamesarmy.com/horoskop/index.html#/about
Is fiveDay truly an array of those ('those' being the JSON message that you included) or is it just one of those. If the latter then you shouldn't be using an ng-repeat. I'm assuming the former though.
I put your JSON message into a formatter online (this one) so you can make sense of it. Here it is...
{
"coord": {
"lon": -0.13,
"lat": 51.51
},
"weather": [
{
"id": 800,
"main": "Clear",
"description": "Sky is Clear",
"icon": "01n"
}
],
"base": "stations",
"main": {
"temp": 293.01,
"pressure": 1019,
"humidity": 60,
"temp_min": 290.15,
"temp_max": 296.15
},
"visibility": 10000,
"wind": {
"speed": 4.6,
"deg": 80
},
"clouds": {
"all": 0
},
"dt": 1438976764,
"sys": {
"type": 1,
"id": 5091,
"message": 0.0124,
"country": "GB",
"sunrise": 1438922043,
"sunset": 1438976240
},
"id": 2643743,
"name": "London",
"cod": 200
}
You can see that your first attempt should be the correct one.
One thing you can try is to intercept it in the controller and pick one of the fiveDay values out of the array (using fiveDay[0]) see if it works there in code. If you're using an IDE with debugging, then break and see what you get.
You don't need ngRepeat in your case as the API (http://api.openweathermap.org/data/2.5/weather?q=London,uk) responds with just an object (for current weather I guess). So in your case:
<div>
<h1 align="center">Customer List</h1>
<div class="forecast">
<div>
<div class="first">
<p>{{ fiveDay.main.temp }}</p>
<p>{{ fiveDay.main.pressure }}</p>
<p>{{ fiveDay.main.humidity }}</p>
</div>
</div>
</div>
</div>
I am getting json object from an external url.
$http.get('http://dev-newsbackend.gotpantheon.com/articles')
.success(function(data, status){
$scope.articles = data.articles;
console.log(data.articles);
}).error(function(err){
console.log(err);
})
})
The json I get is as below:
{
"articles": [
{
"single": {
"title": "7 Tech Upgrades to the Old-School Science Class"
}
},
{
"single": {
"title": "What Will the ALS Association Do With That $100 Million?"
}
},
{
"single": {
"title": "President Obama Rocked a Tan Suit, So Twitter Went Nuts"
}
}
],
"view": {
"name": "articles",
"display": "page",
"path": "articles",
"root": "articles",
"child": "single",
"pages": 1,
"page": 0,
"count": 3,
"limit": 10
}
}
However, when I am doing a ng-repeat though the element is printed multiple times. Am not getting the value.
<ion-list ng-repeat="article in articles">
<ion-item>Test : {{ single.title }}</ion-item>
</ion-list>
My developer console screen-shot:
This is what I got for console.log(data.articles);
The screen-shot of my browser where am getting the list without the title value:
Try this:
<ion-list ng-repeat="article in articles">
<ion-item>Test : {{article.single.title }}</ion-item>
</ion-list>