load view using ng-inlude - javascript

I have to load partial view according click on list view options
i have used syncfusion listview control
also i dont have to change url in address bar...........
<div ng-controller="SidebarController">
<a id="treeView" ej-treeview e-fields-datasource="dataList" e-fields-id="id" e-fields-parentid="pid" e-fields-text="name" e-datasource="localdata" e-fields-haschild="hasChild" e-fields-expanded="expanded" e-fields-imageurl="imageUrl" e-nodeselect="selected" />
<div ng-include="viewurl"/>
here is controller code
SyncfusionDemoApp.controller('SidebarController', function ($scope, $location, $filter, CommonService) {
// alert("Sidebarcontroller");
$scope.dataList = ListViewData;
$scope.selected = function (args) {
for (var i = 0; i < UrlData.length; i += 1) {
var jsonobject = UrlData[i];
if (jsonobject.id == args.id) {
$scope.viewurl = jsonobject.url;
//$scope.show = true;
CommonService.Url = UrlData.url;
}
}
alert($scope.viewurl);
console.log($scope.viewurl);
}
});
and here is the JSON:::
var ListViewData = [
{ id: 1, name: "Fiction Book Lists", hasChild: true, expanded: true },
{ id: 2, pid: 1, name: "Fiction Book1", },
{ id: 3, pid: 1, name: "Fiction Book2" },
{ id: 4, name: "Mystery Book Lists", hasChild: true, expanded: true },
{ id: 5, pid: 4, name: "Mystery Book1" },
{ id: 6, pid: 4, name: "Mystery Book2" },
{ id: 7, name: "Horror Novels", hasChild: true },
{ id: 8, pid: 7, name: "Horror Book1" },
{ id: 9, name: "Novel Lists", hasChild: true },
{ id: 10, pid: 9, name: "Novel Book1" }];
var UrlData = [{ id: 2, pid: 1, url: '../view/fictionbooks/FictionBook1.html' },
{ id: 3, pid: 1, url: '../view/fictionbooks/FictionBook2.html' },
{ id: 5, pid: 4, url: '../view/mysterybooks/MysteryBook1.html' },
{ id: 6, pid: 4, url: "../view/mysterybooks/MysteryBook2.html" },
{ id: 8, pid: 7, url: "../view/horrorbooks/HorrorBook1.html" },
{ id: 10, pid: 9, url: "../view/novelbooks/NovelBook1.html" }];

Related

How to collect all the objects in the object into a single array

When I click the button, I want to include all the objects in the itemSold and itemGet objects of the customers into the products array. how can I do that?
let customers = [{
active: true,
id: 1,
product: {
itemSold: [{id:1,name : 'car'}, {id:2,name : 'home'}],
itemGet: [{id:3,name : 'phone'}, {id:4,name : 'fly'}],
},
},
{
active: true,
id: 2,
product: {
itemSold: [{id:5,name : 'lamb'}, {id:6,name : 'mouse'}],
itemGet: [{id:7,name : 'mouse pad'}, {id:8,name : 'tv'}],
},
},
];
let clickButton = document.querySelector("#clickButton");
let products = [];
clickButton.addEventListener("click", getProcuts()});
function getProducts(){}
<button id="clickButton" >Click
</button>
let customers = [{
active: true,
id: 1,
product: {
itemSold: [{ id: 1, name: 'car' }, { id: 2, name: 'home' }],
itemGet: [{ id: 3, name: 'phone' }, { id: 4, name: 'fly' }],
},
},
{
active: true,
id: 2,
product: {
itemSold: [{ id: 5, name: 'lamb' }, { id: 6, name: 'mouse' }],
itemGet: [{ id: 7, name: 'mouse pad' }, { id: 8, name: 'tv' }],
},
},
];
let clickButton = document.querySelector("#clickButton");
let products = [];
clickButton.addEventListener("click", getProducts);
function getProducts() {
for (let i = 0; i < customers.length; i++) {
products.push(...customers[i].product.itemGet, ...customers[i].product.itemSold);
}
console.log(products);
}
<button id="clickButton">Click</button>
We loop our customers array and then select product property there we push both itemSold and itemGet arrays into products.
You can map over the customers and concatenate the arrays.
const customers = [
{
active: true,
id: 1,
product: {
itemSold: [
{ id: 1, name: "car" },
{ id: 2, name: "home" },
],
itemGet: [
{ id: 3, name: "phone" },
{ id: 4, name: "fly" },
],
},
},
{
active: true,
id: 2,
product: {
itemSold: [
{ id: 5, name: "lamb" },
{ id: 6, name: "mouse" },
],
itemGet: [
{ id: 7, name: "mouse pad" },
{ id: 8, name: "tv" },
],
},
},
];
const products = customers.map((customer) => {
return customer.product.itemSold.concat(customer.product.itemGet);
});
console.log(products);
const customers = [
{
active: true,
id: 1,
product: {
itemSold: [
{ id: 1, name: "car" },
{ id: 2, name: "home" },
],
itemGet: [
{ id: 3, name: "phone" },
{ id: 4, name: "fly" },
],
},
},
{
active: true,
id: 2,
product: {
itemSold: [
{ id: 5, name: "lamb" },
{ id: 6, name: "mouse" },
],
itemGet: [
{ id: 7, name: "mouse pad" },
{ id: 8, name: "tv" },
],
},
},
];
const products = customers.map((customer) => {
return customer.product.itemSold.concat(customer.product.itemGet).flat();
});
console.log(products.flat());

Assign new properties to an array of Objects

I have an array of Objects
const options = [
{ id: 1, name: "Back Pain" },
{ id: 2, name: "Body aches" },
{ id: 3, name: "Cold Sores" },
{ id: 4, name: "Cough" },
{ id: 5, name: "Constipation" },
];
I am trying to write a function that will assign new properties to the object.
The output I am looking for is:
const options = [
{ value: 1, label: "Back Pain" },
{ value: 2, label: "Body aches" },
{ value: 3, label: "Cold Sores" },
{ value: 4, label: "Cough" },
{ value: 5, label: "Constipation" },
];
I have tried to loop through the array using a for loop, but can not figure it out.
Thanks for the help:)
You can do it like this:
const data=[{ id: 1, name: "Back Pain" },
{ id: 2, name: "Body aches" },
{ id: 3, name: "Cold Sores" },
{ id: 4, name: "Cough" },
{ id: 5, name: "Constipation" },
];
var result = data.map(({id:value, name:label})=>({value, label}));
console.log(result);

How to properly un-nest and flatten an array of javascript objects with an array inside them (X-amount of times)

I'm currently working with an array of javascript objects with X-amount of array's with the same type of object inside it, in a specific property (in this case, 'modelChildren')
I would like to flatten this into just one array of objects, and return the level at which it was found. The solution does not have to be plain javascript, as I use lodash for many situations. Ideally I would also like to remove the 'modelChildren' field once finished.
Any help would be appreciated.
Thanks!
input:
[{
id: 1,
name: foo
modelChildren: [
{
id: 2,
name: bar,
modelChildren: [
{
id: 3,
name: foobar
},
{
id: 4,
name: foobarfoo
}
]
}
]
}]
expected result:
[{
id: 1,
name: foo,
level: 1
{
id: 2,
name: bar,
level: 2
},
{
id: 3,
name: foobar,
level: 3
},
{
id: 4,
name: foobarfoo
level: 3
}]
This can be quite easy, it is just Tree Traversal
So you just need to traverse it and remember the level, while storing "nodes" when you are in them.
For example this code
const source = [{
id: 1,
name: 'foo',
modelChildren: [
{
id: 2,
name: 'bar',
modelChildren: [
{
id: 3,
name: 'foobar'
},
{
id: 4,
name: 'foobarfoo'
}
]
}
],
}, {
id: 5,
name: 'foo',
modelChildren: [
{
id: 6,
name: 'bar',
modelChildren: [
{
id: 7,
name: 'foobar'
},
{
id: 8,
name: 'foobarfoo'
}
]
},
{
id: 9,
name: 'bar',
modelChildren: [
{
id: 10,
name: 'foobar'
},
{
id: 11,
name: 'foobarfoo'
}
]
}
],
}
];
const newSource = [];
const _ = require('lodash');
function doIt(items, level) {
if (!items) {
return;
}
items.forEach(item => {
newSource.push(_.merge({level}, _.pick(item, ['id', 'name'])));
doIt(item.modelChildren, level + 1);
})
}
doIt(source, 1);
console.log(newSource);
Having this output
[ { level: 1, id: 1, name: 'foo' },
{ level: 2, id: 2, name: 'bar' },
{ level: 3, id: 3, name: 'foobar' },
{ level: 3, id: 4, name: 'foobarfoo' },
{ level: 1, id: 5, name: 'foo' },
{ level: 2, id: 6, name: 'bar' },
{ level: 3, id: 7, name: 'foobar' },
{ level: 3, id: 8, name: 'foobarfoo' },
{ level: 2, id: 9, name: 'bar' },
{ level: 3, id: 10, name: 'foobar' },
{ level: 3, id: 11, name: 'foobarfoo' } ]

How to generate Child keys by Parents keys in Array

JavaScript ninjas! Now i have this collection:
var cats = [
{ id: 1, parent_id: 0, title: 'Movies' },
{ id: 2, parent_id: 0, title: 'Music' },
{ id: 3, parent_id: 1, title: 'Russian movies' },
{ id: 4, parent_id: 2, title: 'Russian music' },
{ id: 5, parent_id: 3, title: 'New' },
{ id: 6, parent_id: 3, title: 'Top10' },
{ id: 7, parent_id: 4, title: 'New' },
{ id: 8, parent_id: 4, title: 'Top10' },
{ id: 9, parent_id: 0, title: 'Soft' }
];
And i need this result:
var catsExtended = [
{ id: 1, parent_id: 0, childs: [ 3, 5, 6 ], title: 'Movies' },
{ id: 2, parent_id: 0, childs: [ 4, 7, 8 ], title: 'Music' },
{ id: 3, parent_id: 1, childs: [ 5, 6 ], title: 'Russian movies' },
{ id: 4, parent_id: 2, childs: [ 7, 8 ], title: 'Russian music' },
{ id: 5, parent_id: 3, childs: [], title: 'New' },
{ id: 6, parent_id: 3, childs: [], title: 'Top10' },
{ id: 7, parent_id: 4, childs: [], title: 'New' },
{ id: 8, parent_id: 4, childs: [], title: 'Top10' },
{ id: 9, parent_id: 0, childs: [], title: 'Soft' }
];
Help me pleace to collect all IDs
You could use a hash table for the reference to the already returned objects. And for the parents just iterate until parent_id becomes zero.
var cats = [{ id: 1, parent_id: 0, title: 'Movies' }, { id: 2, parent_id: 0, title: 'Music' }, { id: 3, parent_id: 1, title: 'Russian movies' }, { id: 4, parent_id: 2, title: 'Russian music' }, { id: 5, parent_id: 3, title: 'New' }, { id: 6, parent_id: 3, title: 'Top10' }, { id: 7, parent_id: 4, title: 'New' }, { id: 8, parent_id: 4, title: 'Top10' }, { id: 9, parent_id: 0, title: 'Soft' }],
catsExtended = cats.map(function (a) {
var id = a.parent_id;
this[a.id] = { id: a.id, parent_id: a.parent_id, children: [], title: a.title };
while (id) {
this[id].children.push(a.id);
id = this[id].parent_id;
}
return this[a.id];
}, Object.create(null));
console.log(catsExtended);
Combine map() and filter():
var catsExtended = cats.map(function(cat) {
return {
id: cat.id,
parent_id: cat.parent_id,
title: cat.title,
childs: cats.filter(function(c) {
return c.parent_id == cat.id;
}).map(function(c) {
return c.id
})
};
});
I think a simple Array.prototype.forEach can do a lot.
var cats = [{ id: 1, parent_id: 0, title: 'Movies' }, { id: 2, parent_id: 0, title: 'Music' }, { id: 3, parent_id: 1, title: 'Russian movies' }, { id: 4, parent_id: 2, title: 'Russian music' }, { id: 5, parent_id: 3, title: 'New' }, { id: 6, parent_id: 3, title: 'Top10' }, { id: 7, parent_id: 4, title: 'New' }, { id: 8, parent_id: 4, title: 'Top10' }, { id: 9, parent_id: 0, title: 'Soft' }];
cats.forEach(function(c) {
var pid = c.parent_id;
c.children = (this[c.id] = this[c.id] || []);
(this[pid] = (this[pid] || [])).push(c.id)
}, Object.create(null));
console.clear();
console.log(cats);

How can i convert a local array to remote json data?

I am trying to get this array from a remote server which is connected to a dynamic database of course.
As far as i read from ionic forums i need to use $http function from AngularJS but i am pretty new to AngularJS and current examples seems too much complicated to me like this one.
I am trying to convert this example to Remote JSON.
HTML Part:
<ion-list>
<ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}">
Person {{ item.id }} Name {{ item.name }}
</ion-item>
</ion-list>
Array Part:
var friends = [
{ id: 1, name: 'G.I. Joe' },
{ id: 2, name: 'Miss Frizzle' },
{ id: 3, name: 'Scruff McGruff' },
{ id: 4, name: 'G.I. Joe' },
{ id: 5, name: 'Miss Frizzle' },
{ id: 6, name: 'Scruff McGruff' },
{ id: 7, name: 'G.I. Joe' },
{ id: 8, name: 'Miss Frizzle' },
{ id: 9, name: 'Scruff McGruff' },
{ id: 10, name: 'G.I. Joe' },
{ id: 11, name: 'Miss Frizzle' },
{ id: 12, name: 'Scruff McGruff' },
{ id: 13, name: 'G.I. Joe' },
{ id: 14, name: 'Miss Frizzle' },
{ id: 15, name: 'Scruff McGruff' },
{ id: 16, name: 'G.I. Joe' },
{ id: 17, name: 'Miss Frizzle' },
{ id: 18, name: 'Ash Ketchum' }
];
I have tried:
$scope.items = jsonp('http://www.garsoncepte.com/json.php');
$scope.items = $http.jsonp('http://www.garsoncepte.com/json.php');
var url = "http://www.garsoncepte.com/json.php";
$scope.items = $http.jsonp(url);
Since you're using jsonp, You will need set callback function to JSON_CALLBACK and set your items in callback functions.
$scope.items = [];
var url = "http://www.garsoncepte.com/json.php?callback=JSON_CALLBACK";
$http.jsonp(url)
.success(function(data) {
$scope.items = data;
});
= DEMO =
http://plnkr.co/edit/SyMNFBukQsE9B8WQ9Icv?p=preview

Categories