I am using angular 1.6.4 and node 6.1 and I am trying to load a simple array that I have specified in the player-main component to the template but it does not get loaded correctly.
angular.
module('player').
component('playerMain', {
templateUrl: '/player.php',
controller: function PlayListController() {
this.songs = [
{
id: 'one',
title: 'Rain',
artist: 'Drake',
url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3'
},
{
id: 'two',
title: 'Walking',
artist: 'Nicki Minaj',
url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/walking.mp3'
},
{
id: 'three',
title: 'Barrlping with Carl (featureblend.com)',
artist: 'Akon',
url: 'http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3'
},
{
id: 'four',
title: 'Angry cow sound?',
artist: 'A Cow',
url: 'http://www.freshly-ground.com/data/audio/binaural/Mak.mp3'
},
{
id: 'five',
title: 'Things that open, close and roll',
artist: 'Someone',
url: 'http://www.freshly-ground.com/data/audio/binaural/Things%20that%20open,%20close%20and%20roll.mp3'
}
];
}
});
When the template url is called 'player.php' express router redirects it to following jade template.
.container
.row
.col-md-12
h5 Songs
ul
li(ng-repeat='song in $ctrl.songs')
button(music-player='play', add-song='song') {( song.title )}
button(music-player='', add-song='song') +
button(play-all='songs') Play all
button(play-all='songs', data-play='false') Add all
hr
But even though ng-repeat does iterate over the array 5 times, the
{(song.title)}
does not get evaluated, it simply print it as a string.
Related
I am trying to show Expand/Collapse Flatlist data in react-native.
It is like single parent with multiple childs. So, If user tap on the cell, I have to show multiple rows for that expand/collapse.
But, I am getting data from server like following.
[{
code: '1212',
name: 'Bajaj Model 1',
url: 'Some url',
category: 'Bike'
},
{
code: '1213',
name: 'Bajaj Model 2',
url: 'other url',
category: 'Bike'
},
{
code: '1454',
name: 'BMW Model 1',
url: 'Some url',
category: 'Car'
},
{
code: '1454',
name: 'BMW Model 2',
url: 'Some url',
category: 'Car'
}
]
So, All the Bike data, I have to show one place like Parent and child.
For that I have done filter.
const fundsFilterData = mapValues(groupBy(response, 'category'),
fundslist => fundslist.map(item => omit(item, 'category')));
And I am getting like following.
{
'Bike': [{
code: '1212',
name: 'Bajaj Model 1',
url: 'Some url'
},
{
code: '1213',
name: 'Bajaj Model 2',
url: 'other url'
},
],
'Car': [{
code: '1454',
name: 'BMW Model 1',
url: 'Some url'
},
{
code: '1454',
name: 'BMW Model 2',
url: 'other url'
},
]
}
But, I want to make it as array along with some pre added keys like following.
[{
'Title': 'Bike',
'Values': [{
'code': '1212',
'name': 'Bajaj Model 1',
'url': 'Some url'
},
{
'code': '1454',
'name': 'Bajaj Model 2',
'url': 'other url'
}
]
},
{
'Title': 'Car',
'Values': [{
'code": '
1454 ',
'name": '
BMW Model 1 ',
'url": '
Some url '
},
{
'code': '1454',
'name': 'BMW Model 2',
'url': 'Some url'
}
]
}
}
So that I can show Titles in headers and once user tap on row, I can show child's data as expanded.
Any suggestions?
Use _.map() which returns an array, and not _.mapValues(). In the _.map() get the Title (the key) from the 2nd param. Use it and the values (after _.omit()) to construct an object for each group.
const { map, groupBy, omit } = _;
const response = [{"code":"1212","name":"Bajaj Model 1","url":"Some url","category":"Bike"},{"code":"1213","name":"Bajaj Model 2","url":"other url","category":"Bike"},{"code":"1454","name":"BMW Model 1","url":"Some url","category":"Car"},{"code":"1454","name":"BMW Model 2","url":"Some url","category":"Car"}];
const fundsFilterData = map(
groupBy(response, 'category'),
(list, Title) => ({
Title,
Values: list.map(item => omit(item, 'category'))
})
);
console.log(fundsFilterData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
I have the following JSON data which comes from scraping the technology on a page, I have made a Json array called MyArray that is below:
{ url: 'http://www.ozautoelectrics.com',
originalUrl: 'http://www.ozautoelectrics.com',
applications:
[ { name: 'Font Awesome',
confidence: '100',
version: '',
icon: 'Font Awesome.png',
website: 'http://fontawesome.io',
categories: [Object] },
{ name: 'Google Analytics',
confidence: '100',
version: '',
icon: 'Google Analytics.svg',
website: 'http://google.com/analytics',
categories: [Object] },
{ name: 'jQuery',
confidence: '100',
version: '2.1.3',
icon: 'jQuery.svg',
website: 'http://jquery.com',
categories: [Object] } ] }
My question is how do I access the [Object] within categories using NODE? or any of the other things inside applications?
I can use myArray.url to get the URL but how do I get whats inside applications properly? I tried myArray.applications.name
Also i'm new.
Loop through applications and use index to access categories.
var myArray = { url: 'http://www.ozautoelectrics.com',
originalUrl: 'http://www.ozautoelectrics.com',
applications:
[ { name: 'Font Awesome',
confidence: '100',
version: '',
icon: 'Font Awesome.png',
website: 'http://fontawesome.io',
categories: [Object] },
{ name: 'Google Analytics',
confidence: '100',
version: '',
icon: 'Google Analytics.svg',
website: 'http://google.com/analytics',
categories: [Object] },
{ name: 'jQuery',
confidence: '100',
version: '2.1.3',
icon: 'jQuery.svg',
website: 'http://jquery.com',
categories: [Object] } ]
};
for(var i =0; i<myArray.applications.length;i++){
console.log(myArray.applications[i].categories);
}
You can use forEach method to access each element of array.
var myArray = {
url: 'http://www.ozautoelectrics.com',
originalUrl: 'http://www.ozautoelectrics.com',
applications: [ { name: 'Font Awesome',
confidence: '100',
version: '',
icon: 'Font Awesome.png',
website: 'http://fontawesome.io',
categories: [Object] },
{ name: 'Google Analytics',
confidence: '100',
version: '',
icon: 'Google Analytics.svg',
website: 'http://google.com/analytics',
categories: [Object] },
{ name: 'jQuery',
confidence: '100',
version: '2.1.3',
icon: 'jQuery.svg',
website: 'http://jquery.com',
categories: [Object] }
]};
myArray.applications.forEach(function(value, index, array){
console.log(value.categories); //Allow to access the array
//console.log(value.categories[0]); //Allows the first element in the array
});
console.log('Arrow function Solution');
//solution with arrow function
myArray.applications.forEach((value, index, array) => {
console.log(value.categories); //Allow to access the array
//console.log(value.categories[0]); //Allows the first element in the array
});
You can use lodash map function for that.
https://lodash.com/docs/4.17.4#map
var lodash = require('lodash');
var categoriesArr = lodash.map(myArray.applications, (item) => item.categories);
Feel free to tell me to go away (I'm a newbie to angular and javascript), but how would I get started on saving this angularJS to localStorage? Is it something that can be done relatively painlessly by creating a saving function in the add()? I've seen that angular has its own local-storage but can this be done without that? Pen: http://codepen.io/kiddigit/pen/LZVXMV
angular.module('app', []);
angular.module('app').controller("MainController", function(){
var vm = this;
vm.title = 'Movie Database';
vm.searchInput = '';
vm.shows = [
{
title: 'Game of Thrones',
actor: 'Dudes',
year: 2011,
favorite: true
},
{
title: 'Walking Dead',
actor: 'More dudes',
year: 2010,
favorite: false
},
{
title: 'The Goonies',
actor: 'The Coreys',
year: 2002,
favorite: true
},
{
title: 'Firefly',
actor: 'Dunno',
year: 2002,
favorite: false
},
{
title: 'Bullit',
actor: 'McQueen',
year: 2013,
favorite: true
},
];
vm.orders = [
{
id: 1,
title: 'Year Ascending',
key: 'year',
reverse: false
},
{
id: 2,
title: 'Year Descending',
key: 'year',
reverse: true
},
{
id: 3,
title: 'Title Ascending',
key: 'title',
reverse: false
},
{
id: 4,
title: 'Title Descending',
key: 'title',
reverse: true
}
];
vm.order = vm.orders[0];
vm.new = {};
vm.addShow = function() {
vm.shows.push(vm.new);
vm.new = {};
};
});
The browser (the window object) has an object called localStorage, simple as that. If you want to save an object to the local storage you better stringify it first using json.
Example:
// inside your controller:
function saveMovie() {
var selectedMovieString = json.stringify(this.selectedMovie); // for example;
localStorage.setItem("selectedMovie", selectedMovieString);
}
I am new to AngularJs, and I'm creating the nested view template like this:
http://plnkr.co/edit/u18KQc?p=preview
But the code I have is of different type. For routing, it uses this:
awfApp.config(function ($stateProvider, $urlRouterProvider) {
var states = [
{ name: 'home', isDefault: true }, //TODO: Moure a awf
{ name: 'module1', module: { title: "Module 01", img: "modul1.png" } },
{ name: 'module2', module: { title: "Module 02", img: "modul2.png" } },
{ name: 'mainlist4', module: { title: "Main List4", img: "modul2.png" } },
{ name: 'mainlist2', module: { title: "Main List2", img: "modul2.png" } },
{ name: 'mainlist', module: { title: "Main List", img: "modul2.png" } }
];
if (appConfig.doLogin)
states.push({ name: 'articles', module: { title: "Articles", img: "articles.png" } });
});
Please tell me, how can create nested views in AngularJs using the code above.
Thanks
I am novice to Ext-js and referring sencha.com for tutorials. I am trying to modify an existing application build in ext-js 2.2. It has in particular page following options for checkbox.
var assetPermissions = [
{ id: 'MF', name: 'Mutual Funds' },
{ id: 'ETF', name: 'ETFs' },
{ id: 'CE', name: 'Closed End Funds' },
{ id: 'ST', name: 'Stocks' },
{ id: 'VA', name: 'Variable Annuities' },
{ id: 'FI', name: 'Bonds' },
{ id: 'SMA', name: 'Separately Managed Accounts' },
{ id: 'MO', name: 'Models' },
{ id: 'MM', name: 'Managed Models' },
{ id: 'UD', name: 'User Defined' },
{ id: 'I:MD', name: 'Model Dashboard' },
{ id: 'I:SC', name: 'Screener' },
{ id: 'CUAS', name: 'Create Custom Assets & Folders' },
{ id: 'OA', name: 'Other Assets'}
];
Now I want that when a user selects the Other Assets option in the check box and another check box should be prompted something like this.
Name Select
ABC
XYZ
Save | Cancel
I also want a Save and Cancel button for that dialog box and changes made to it are saved.
So can any one suggest how to do this in ExtJs. Thanks.