We Keep Coding

AngularJS - Dynamic Youtube URL do not properly work with Object

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

Json array details show in three pages in angularjs with ionic

I have category array. there are more products.
I need show categories in category page.
when click on a category, I have to redirect the product page and show the necessary products.
When click on a product, I have to redirect the product_details page and show the necessary product details.
category loaded to the category page, when click on that it will redirect the product page. But, I cant see products.
And what are the errors of these controllers, and how to create "product_details.html", and "product.html" page also.
I have to show like this :
category page : term_id, name
product page : post_title, ID
product details page : post_title, post_date, post_author, ID
categorylist-product.json
{
"category": [{
"term_id": "10",
"name": "Arden Grange",
"slug": "arden-grange",
"products": [{
"ID": "47",
"post_title": "Arden Grange, Premium",
"post_date": "2015-10-20 16:13:04",
"post_author": "5"
}, {
"ID": "50",
"post_title": "Arden Grange Puppy\/Junior Large Breed",
"post_date": "2015-10-21 04:56:23",
"post_author": "5"
}, {
"ID": "53",
"post_title": "Arden Grange Weaning\/Puppy",
"post_date": "2015-10-22 12:52:35",
"post_author": "5"
}]
}, {
"term_id": "8",
"name": "Menu 1",
"slug": "menu-1",
"products": [{
"ID": "38",
"post_title": "Home",
"post_date": "2015-10-20 10:43:44",
"post_author": "1"
}, {
"ID": "30",
"post_title": "",
"post_date": "2015-10-20 10:13:56",
"post_author": "1"
}, {
"ID": "31",
"post_title": "",
"post_date": "2015-10-20 10:13:57",
"post_author": "1"
}]
}]
}
CategoryController.js
app.controller('CategoryController', ['$scope','category', function($scope, category) {
category.success(function(data) {
$scope.userslists = data;
});
}]);
ProductController.js
app.controller('ProductController', ['$scope', '$routeParams', 'category', function($scope, $routeParams, category,products) {
category.success(function(data) {
$scope.users = data.category[$routeParams.id];
});
}]);
app.js
var app = angular.module('LookApp', ['ionic','ngCordova','ngRoute']);
app.config(function($stateProvider, $urlRouterProvider,$routeProvider) {
$routeProvider
.when('/', {
controller: 'CategoryController',
templateUrl: 'views/category.html'
})
.when('/:id', {
controller: 'ProductController',
templateUrl: 'views/users.html'
})
.when('/login/:friendId', {
controller: 'LoginController',
templateUrl: 'views/login.html'
})
.otherwise({
redirectTo: '/'
});
category.js (Service file)
app.factory('category', ['$http', function($http) {
return $http.get('http://localhost/youtubewebservice/shop-categorylist-product.php')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);

see you have put your data in $scope.userlists so when you call your data in html then you need to do like this
category page
<div ng-repeat="user in userslists">
Term ID : {{user.category.term_id}}
Name : {{user.category.name}}
</div>
product page
<div ng-repeat="user in userslists">
Post Title : {{user.category.products.post_title}}
ID : {{user.category.products.ID}}
</div>
Details page
<div ng-repeat="user in userslists">
Post Title : {{user.category.products.post_title}}
Post Date : {{user.category.products.post_date}}
Post Author: {{user.category.products.post_author}}
ID : {{user.category.products.ID}}
</div>

How to use ng-repeat with a JSON file stored in localStorage?

I am learning how to save a JSON file (locally held) to the user's localStorage and then retrieve that information using Angular and use hg-repeat to put each object from the JSON file (consists of multiple objects representing products) into a product box (which shows up as search results)
Here is my Code so far..
AJAX.JS
if(typeof(Storage)!=="undefined")
{
$(document).ready(function () {
$('.searchButton').click(function () {
$.ajax({
timeout: 3000,
url: "data/cars.json",
dataType: "text",
success: function(products) {
alert(products);
var dataToStore = JSON.stringify(products);
localStorage.setItem('userData', dataToStore);
alert(dataToStore);
storedData = JSON.parse(localStorage.getItem('userData'));
alert(storedData);
window.location.href = "results.html";
},
});
});
})
}
else {
alert("Sorry your browser is too old to support this website. Please update.");
}
APP.JS
var app = angular.module('searchFox', []);
app.controller('foxController', ['$scope', function($scope) {
$scope.valueFromLocalStorage = storedData;
}]);
HTML (SEARCH RESULTS PAGE // ANGULAR PART)
<div class="row section">
<div class="three columns" ng-repeat="v in valueFromLocalStorage">
<div class="panel">
<img class="panelImage" src="images/product6.jpg"></img>
<p class="panelTitle">{{v.model}}</p>
<p class="panelPrice">{{v.price}}</p>
</div>
<img class="mFireOne" src="images/fire.png">
<p class="mViewOne">9318</p>
<img class="mFireTwo" src="images/heart.png">
<p class="mViewTwo">172</p>
</div>
</div>
JSON FILE EXAMPLE
{
"make": "honda",
"model": "accord",
"year": "1989",
"mileage": "25000",
"color": "black",
"transmission": "automatic",
"cylinders": "4",
"type": "sedan",
"title": "clean",
"price": "$15,000",
"img_url": "http://img.modifiedcartrader.com/uploaded/XL/2006/12/6584_Honda_Accord_1222200613708PM1.JPG"
},
{
"make": "acura",
"model": "integra",
"year": "2001",
"mileage": "108800",
"color": "red",
"transmission": "manual",
"cylinders": "4",
"type": "coupe",
"title": "clean",
"img_url": "http://carphotos.cardomain.com/ride_images/2/3951/4101/22377050003_large.jpg"
},
{
"make": "ford",
"model": "mustang",
"year": "2015",
"mileage": "1003",
"color": "blue",
"transmission": "manual",
"cylinders": "8",
"type": "coupe",
"title": "clean",
"img_url": "http://s1.cdn.autoevolution.com/images/news/gallery/2015-ford-mustang-rendered-with-slightly-different-face-rear-photo-gallery_6.jpg"
},
{
"make": "volkswagen",
"model": "golf",
"year": "2002",
"mileage": "86000",
"color": "green",
"transmission": "automatic",
"cylinders": "4",
"type": "hatchback",
"title": "clean",
"img_url": "http://zombdrive.com/images/2002_volkswagen_gti_2dr-hatchback_18t_s_oem_1_500.jpg"
},
{
"make": "bmw",
"model": "335i",
"year": "2010",
"mileage": "24664",
"color": "red",
"transmission": "manual",
"cylinders": "6",
"type": "sedan",
"title": "clean",
"img_url": "http://foodcourtlunch.com/wp-content/uploads/2010/03/bmw_335i_30.jpg"
}
]
So so far i'v managed to use AJAX to grab the locally help JSON file and save it to the user's localStorage. But now I cannot figure out how to correctly and cleanly send it over to the Angular Page (search results) and then to use hg-repeat to make a product container for every product object in the JSON file...

You need get your object from localstorage. You can use https://github.com/grevory/angular-local-storage this library as well.
example:
```
var app = angular.module('searchFox', ['LocalStorageModule']);
app.controller('foxController', ['$scope, LocalStorageModule', function($scope, LocalStorageModule) {
$scope.saved = "gold";
$scope.myObj = localStorageService.get('key')
}]);
<div class="three columns" ng-repeat="smth in myObj">
```
after that you will have your object in your view and can do with that everything you want.

Eventually you want to feed ng-repeat an array. Depending on your JSON file's contents you may have to call
JSON.parse(jsonStr);
or pass the contents of the object in JavaScript into an array somehow.
But think this:
<div class="three columns" ng-repeat="??">
Wants something like
<div class="three columns" ng-repeat="{arrayOfObjects}">
where is some arrayOfObjects = [ {...}, {...}, {...}];

If you already have stored everything in localStorage, Angular can access the values directly using native JS or angular-local-storage.
Just fetch values from localStorage in your controller, and pass it to view using $scope.
$scope.valueFromLocalStorage = window.localStorage.getItem('productQuery');
Now, you can use ng-repeat over valueFromLocalStorage to display values in your view.
<div class="row section">
<div class="three columns" ng-repeat="v in valueFromLocalStorage">
<div class="panel">
<img class="panelImage" ng-src="/images/{{v.imageName}}" ></img>
<p class="panelTitle">{{v.name}}</p>
<p class="panelPrice">{{v.price}}</p>
</div>
<img class="mFireOne" src="images/fire.png">
<p class="mViewOne">9318</p>
<img class="mFireTwo" src="images/heart.png">
<p class="mViewTwo">172</p>
</div>
Also, there is a correction in your ajax.js file:
var save = function(obj) {
localStorage["productQuery"] = JSON.stringify(obj); //obj instead of productQuery
};

AngularJS accessing values in a complex weather JSON

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>

ng-repeat on a multi-dimensional array/object

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>