Angular js will only show first element in ng-repeat - javascript

I am using angular 1.5.5
function GetDashboardForAllEmployees()
{
var response = eRotaService.GetDashboard();
response.then(function (data) {
$scope.weekDays = data.data;
console.log(data.data);
}, function () {
alert("Failed to load dashboard.");
})
}
.NET service returns json :
{
"weekDays": [{
"name": "Monday",
"display": 0,
"employees": [{
"employeeId": 1,
"name": "Adam",
"start": 8,
"finish": 16,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 8
}
}, {
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}]
}, {
"name": "Tuesday",
"display": 1,
"employees": [{
"employeeId": 1,
"name": "Bob",
"start": 10,
"finish": 18,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 10
}
}, {
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}]
}]
}
I am planning to display each day of the week, but only first day will show(Monday).
<div class="row" ng-repeat="week in weekDays">
#for (int i = -2; i < 22; i+=2 )
{
<div class="col-sm-1">
#string.Format("{0}:00", i + 2)
</div>
}
<hr />
<div class="col-sm-12">
<h3>{{week[$index].name}}</h3>
<hr />
<div class="row" ng-repeat="employee in week[$index].employees">
<div class="col-sm-12">
<h4>{{employee.name}}</h4>
<hr />
<div gridster>
<ul>
<li gridster-item="employee.gridSetup" ng-cloak>
<div class="panel-default" >
<div class="panel-heading">
<h5>From : {{employee.start}} to {{employee.finish}}</h5>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I tried to use ng-repeat without $index but result was blank page (no angular js error).


<div class="row" ng-repeat="week in weekDays">
hm mustn't it be
<div class="row" ng-repeat="week in weekDays.weekDays">
The Jason-String looks somewat formated like this:
{
"weekDays": [
{
"name": "Monday",
"display": 0,
"employees": [
{
"employeeId": 1,
"name": "Adam",
"start": 8,
"finish": 16,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 8
}
},
{
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}
]
},
{
"name": "Tuesday",
"display": 1,
"employees": [
{
"employeeId": 1,
"name": "Bob",
"start": 10,
"finish": 18,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 10
}
},
{
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}
]
}
]
}
so this means that all weekdays are in the element "weekDays". And then you have in week only one week and don't need an array-indexer to access the hole thing.

Related

Lodash: how to group using multiple nested properties?

Trying to group my array using 2 nested properties of object. Below is the data I'm working with.
I need to group this data using start and end properties which are nested in time object here
`
[{
"id": 227,
"day": 0,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 228,
"day": 1,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 229,
"day": 2,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 230,
"day": 3,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 231,
"day": 4,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 232,
"day": 5,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 233,
"day": 6,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}, {
"id": 283,
"day": 0,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 284,
"day": 1,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 285,
"day": 2,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 286,
"day": 3,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 287,
"day": 4,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 288,
"day": 5,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}, {
"id": 289,
"day": 6,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}]
`
Currently I can group using one property using code below but not both:
var result = _.groupBy(this.slots, 'time.start')
Expected data could look like below:
`
03: 00: 00 - 06: 00: 00: [{
"id": 227,
"day": 0,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
},
{
"id": 228,
"day": 1,
"time": {
"id": 31,
"start": "03:00:00",
"end": "06:00:00"
},
"max_tasks": 3
}
]
06: 00: 00 - 08: 00: 00: [{
"id": 283,
"day": 0,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
},
{
"id": 284,
"day": 1,
"time": {
"id": 39,
"start": "06:00:00",
"end": "08:00:00"
},
"max_tasks": 3
}
]
`
Thanks in advance :)

You can use the function reduce for grouping by those values.
let arr = [{ "id": 227, "day": 0, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 228, "day": 1, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 229, "day": 2, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 230, "day": 3, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 231, "day": 4, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 232, "day": 5, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 233, "day": 6, "time": { "id": 31, "start": "03:00:00", "end": "06:00:00" }, "max_tasks": 3}, { "id": 283, "day": 0, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 284, "day": 1, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 285, "day": 2, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 286, "day": 3, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 287, "day": 4, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 288, "day": 5, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}, { "id": 289, "day": 6, "time": { "id": 39, "start": "06:00:00", "end": "08:00:00" }, "max_tasks": 3}]
let result = arr.reduce((a, c) => {
let key = `${c.time.start} - ${c.time.end}`;
(a[key] || (a[key] = [])).push(c);
return a;
}, {});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Use _.groupBy() with a callback, and generate the key from start and end:
const data = [{"id":227,"day":0,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":228,"day":1,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":229,"day":2,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":230,"day":3,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":231,"day":4,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":232,"day":5,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":233,"day":6,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":283,"day":0,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":284,"day":1,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":285,"day":2,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":286,"day":3,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":287,"day":4,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":288,"day":5,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":289,"day":6,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3}]
const result = _.groupBy(data, ({ time: { start, end } }) => `${start} - ${end}`)
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

How can I sort data with Firebase?

I am creating a little React application about Pokemons. I have in DB informations about all of them (about 900+).
They all contain an id field, which is an integer from 1 to 900+.
But the problem is when I do a request like this :
firebase.database().ref(`mydb`).orderByChild('id').startAt(1).limitToFirst(limit).once('value')
The results are not correct: I have an id array like this: [9,1, 10, 6, 4]
Am I doing something wrong ?
Edit:
I add the result I got when I perform the request I wrote above, I added a custom_id field containing ids as strings, but I stille have an unordered result:
[
{
"base_experience": 239,
"custom_id": "009",
"height": 16,
"id": 9,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/9/encounters",
"name": "blastoise",
"order": 12,
"weight": 855
},
{
"base_experience": 64,
"custom_id": "001",
"height": 7,
"id": 1,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/1/encounters",
"name": "bulbasaur",
"order": 1,
"weight": 69
},
{
"base_experience": 39,
"custom_id": "010",
"height": 3,
"id": 10,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/10/encounters",
"name": "caterpie",
"order": 14,
"weight": 29
},
{
"base_experience": 240,
"custom_id": "006",
"height": 17,
"id": 6,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/6/encounters",
"name": "charizard",
"order": 7,
"weight": 905
},
{
"base_experience": 62,
"custom_id": "004",
"height": 6,
"id": 4,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/4/encounters",
"name": "charmander",
"order": 5,
"weight": 85
},
{
"base_experience": 142,
"custom_id": "005",
"height": 11,
"id": 5,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/5/encounters",
"name": "charmeleon",
"order": 6,
"weight": 190
},
{
"base_experience": 142,
"custom_id": "002",
"height": 10,
"id": 2,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/2/encounters",
"name": "ivysaur",
"order": 2,
"weight": 130
},
{
"base_experience": 63,
"custom_id": "007",
"height": 5,
"id": 7,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/7/encounters",
"name": "squirtle",
"order": 10,
"weight": 90
},
{
"base_experience": 236,
"custom_id": "003",
"height": 20,
"id": 3,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/3/encounters",
"name": "venusaur",
"order": 3,
"weight": 1000
},
{
"base_experience": 142,
"custom_id": "008",
"height": 10,
"id": 8,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/8/encounters",
"name": "wartortle",
"order": 11,
"weight": 225
}
]

You've not attached your database image, but with the order one thing is sure that these keys in your database are strings.
And when you order string data, it is ordered lexicographically.
So for numbers, this is the normal order:
1
9
10
But for strings, this is the normal order:
"9"
"1"
"10"
I don't think there is any operator in Firebase (nor in most other databases) to change this behaviour.
Instead, you will have to modify the data to get the behavior you want. So: store values that are in the order you need them when sorted lexicographically.
For numbers you can accomplish that by padding them with zeroes:
"001"
"009"
"010"
EDIT:
Now after Json, these values are stored in id field so the above thing does not apply to this.
You may however use a code like this, to do what you're trying:
mDatabase
.child("main_child")
.orderByChild("id")
.addValueEventListener(new ValueEventListener() {
public void onDataChange(DataSnapshot snapshot) {
for (DataSnapshot child: snapshot.getChildren()) {
System.out.println(child.getKey());
}
}
...

how to get inner most child of a JSON data

I have a JSON data which is something like this, And my requirement to fetch the data of inner most children i.e hierarchyLevel: 4. And this JSON data is not static, the hierarchyLevel can go any thing like 5, 6, 7 any thing.
Please help to find solution in javascript.
{
"hierarchylist": [
{
"hierarchyId": 10,
"hierarchyLevel": 0,
"name": "ABC",
"parentId": 0,
"children": [
{
"hierarchyId": 12,
"hierarchyLevel": 1,
"name": "ABC-Child1",
"parentId": 10,
"children": [
{
"hierarchyId": 2,
"hierarchyLevel": 2,
"name": "People Management & Development1 ",
"parentId": 12,
"children": [
{
"hierarchyId": 5,
"hierarchyLevel": 3,
"name": "Resourcing2_1",
"parentId": 2,
"children": [
{
"hierarchyId": 19,
"hierarchyLevel": 4,
"name": "Resource Request ",
"parentId": 5,
"children": [],
"docId": 19,
"docstatusid": 20
}
]
}
]
}
]
}
]
}
]
}
Thanks.

This should get you the inner-most one:
let data = {
"hierarchylist": [
{
"hierarchyId": 10,
"hierarchyLevel": 0,
"name": "ABC",
"parentId": 0,
"children": [
{
"hierarchyId": 12,
"hierarchyLevel": 1,
"name": "ABC-Child1",
"parentId": 10,
"children": [
{
"hierarchyId": 2,
"hierarchyLevel": 2,
"name": "People Management & Development1 ",
"parentId": 12,
"children": [
{
"hierarchyId": 5,
"hierarchyLevel": 3,
"name": "Resourcing2_1",
"parentId": 2,
"children": [
{
"hierarchyId": 19,
"hierarchyLevel": 4,
"name": "Resource Request ",
"parentId": 5,
"children": [],
"docId": 19,
"docstatusid": 20
}
]
}
]
}
]
}
]
}
]
}
let children = data.hierarchylist[0].children;
while(children[0] && children[0].children && children[0].children.length) {
children = children[0].children;
}
console.log(children);

You can try the while loop, here's the example
var children = json['hierarchylist']['children'][0];
while(typeof children !== 'undefined') {
children = children['children'][0];
}
console.log(children);

how to create jquery variables from json file?

Any help is very much appreciated.
Basically I am using an api from mashape, but I'm a bit of a newbie to JSON files.
What I want to do is create a load of jquery variables for each teams total points.
Bare in mind that the teams change position in the JSON file depending on their position in the table.
Below is my jquery code so far (without the auth code) and the JSON file.
$.ajax({
url: 'https://heisenbug-premier-league-live-scores-v1.p.mashape.com/api/premierleague/table',
type: 'GET',
data: {},
dataType: 'json',
success: function(data) {
$(data.records).each(function(index, value) {
});
console.dir((data.source));
},
error: function(err) { alert(err); },
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Authorization",
"Auth Code");
}
});
And the JSON file.
{
"records": [
{
"team": "Manchester City",
"played": 10,
"win": 8,
"draw": 0,
"loss": 2,
"goalsFor": 29,
"goalsAgainst": 12,
"points": 24
},
{
"team": "Arsenal",
"played": 10,
"win": 7,
"draw": 2,
"loss": 1,
"goalsFor": 16,
"goalsAgainst": 6,
"points": 23
},
{
"team": "Tottenham",
"played": 10,
"win": 5,
"draw": 4,
"loss": 1,
"goalsFor": 18,
"goalsAgainst": 7,
"points": 19
},
{
"team": "Leicester",
"played": 10,
"win": 5,
"draw": 4,
"loss": 1,
"goalsFor": 16,
"goalsAgainst": 13,
"points": 19
},
{
"team": "Manchester United",
"played": 10,
"win": 5,
"draw": 4,
"loss": 1,
"goalsFor": 12,
"goalsAgainst": 4,
"points": 19
},
{
"team": "West Ham",
"played": 10,
"win": 4,
"draw": 4,
"loss": 2,
"goalsFor": 16,
"goalsAgainst": 12,
"points": 16
},
{
"team": "Liverpool",
"played": 9,
"win": 4,
"draw": 3,
"loss": 2,
"goalsFor": 11,
"goalsAgainst": 11,
"points": 15
},
{
"team": "Norwich",
"played": 10,
"win": 4,
"draw": 3,
"loss": 3,
"goalsFor": 12,
"goalsAgainst": 10,
"points": 15
},
{
"team": "Southampton",
"played": 10,
"win": 4,
"draw": 2,
"loss": 4,
"goalsFor": 17,
"goalsAgainst": 13,
"points": 14
},
{
"team": "Chelsea",
"played": 10,
"win": 4,
"draw": 2,
"loss": 4,
"goalsFor": 15,
"goalsAgainst": 14,
"points": 14
},
{
"team": "West Bromwich Albion",
"played": 11,
"win": 4,
"draw": 2,
"loss": 5,
"goalsFor": 14,
"goalsAgainst": 17,
"points": 14
},
{
"team": "Crystal Palace",
"played": 11,
"win": 4,
"draw": 2,
"loss": 5,
"goalsFor": 12,
"goalsAgainst": 12,
"points": 14
},
{
"team": "Watford",
"played": 11,
"win": 4,
"draw": 2,
"loss": 5,
"goalsFor": 11,
"goalsAgainst": 10,
"points": 14
},
{
"team": "Stoke",
"played": 9,
"win": 4,
"draw": 1,
"loss": 4,
"goalsFor": 10,
"goalsAgainst": 9,
"points": 13
},
{
"team": "Swansea",
"played": 10,
"win": 3,
"draw": 4,
"loss": 3,
"goalsFor": 9,
"goalsAgainst": 12,
"points": 13
},
{
"team": "Everton",
"played": 11,
"win": 3,
"draw": 4,
"loss": 4,
"goalsFor": 23,
"goalsAgainst": 20,
"points": 13
},
{
"team": "Sunderland",
"played": 10,
"win": 3,
"draw": 2,
"loss": 5,
"goalsFor": 12,
"goalsAgainst": 11,
"points": 11
},
{
"team": "Bournemouth",
"played": 9,
"win": 2,
"draw": 4,
"loss": 3,
"goalsFor": 10,
"goalsAgainst": 13,
"points": 10
},
{
"team": "Newcastle United",
"played": 10,
"win": 2,
"draw": 4,
"loss": 4,
"goalsFor": 14,
"goalsAgainst": 14,
"points": 10
},
{
"team": "Aston Villa",
"played": 9,
"win": 0,
"draw": 3,
"loss": 6,
"goalsFor": 6,
"goalsAgainst": 13,
"points": 3
}
]
}
Thank You Very Much!

To create an object and add the total points for each team, you'll need to create a map (key/value) where the key is each team's name and the value is the total points for each team.
I'm hosting your data on MyJSON.
Here's a function that retrieves the data from the remote server, and initializes an object containing the total points for each team:
function getData() {
// https://api.myjson.com/bins/1c6utx
var teamScores = {};
$.get("https://api.myjson.com/bins/1c6utx", function(data, status){
$.each(data.records, function(index, value) {
if (!teamScores[value.team]) {
teamScores[value.team] = 0;
}
teamScores[value.team] += value.points;
});
console.log(JSON.stringify(teamScores));
});
}
/* Output:
{"Manchester City":24,"Arsenal":23,"Tottenham":19,"Leicester":19,"Manchester United":19,"West Ham":16,"Liverpool":15,"Norwich":15,"Southampton":14,"Chelsea":14,"West Bromwich Albion":14,"Crystal Palace":14,"Watford":14,"Stoke":13,"Swansea":13,"Everton":13,"Sunderland":11,"Bournemouth":10,"Newcastle United":10,"Aston Villa":3}
*/
You can check this fiddle to see it in action. Hope this helps!

How to find all unique paths in tree structure

root1
child1
child2
grandchild1
grandchild2
child3
root2
child1
child2
grandchild1
greatgrandchild1
I have an object array like tree structure like above, I want to get all unique paths in like this
Food->Dry Food Items->Local Dry Food Items
Food->Dry Food Items->Thai Dry Food Items
Food->Dry Food Items->Others
Food->Fruits
------
------
This is my object
[
{
"id": 1,
"name": "Food",
"parent_id": 0,
"children": [
{
"id": 5,
"name": "Dry Food Items",
"parent_id": 1,
"children": [
{
"id": 11,
"name": "Local Dry Food Items",
"parent_id": 5
},
{
"id": 12,
"name": "Thai Dry Food Items",
"parent_id": 5
},
{
"id": 60,
"name": "Others",
"parent_id": 5
}
]
},
{
"id": 6,
"name": "Fruits",
"parent_id": 1
},
{
"id": 7,
"name": "LG Branded",
"parent_id": 1
},
{
"id": 8,
"name": "Meat",
"parent_id": 1
},
{
"id": 9,
"name": "Sea food",
"parent_id": 1
},
{
"id": 10,
"name": "Vegetables",
"parent_id": 1,
"children": [
{
"id": 14,
"name": "Local Vegetables",
"parent_id": 10
},
{
"id": 15,
"name": "Thai Vegetables",
"parent_id": 10
}
]
},
{
"id": 38,
"name": "Frozen",
"parent_id": 1
},
{
"id": 39,
"name": "IP Kitchen",
"parent_id": 1,
"children": [
{
"id": 40,
"name": "IP Meat",
"parent_id": 39
},
{
"id": 41,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 42,
"name": "IP Ingredients",
"parent_id": 39
},
{
"id": 43,
"name": "IP Sauce",
"parent_id": 39
},
{
"id": 44,
"name": "IP Seafood",
"parent_id": 39
},
{
"id": 45,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 46,
"name": "IP Desert",
"parent_id": 39
}
]
}
]
},
{
"id": 2,
"name": "Beverage",
"parent_id": 0,
"children": [
{
"id": 16,
"name": "Bar",
"parent_id": 2
},
{
"id": 17,
"name": "Coffee & Tea",
"parent_id": 2
},
{
"id": 18,
"name": "In Can",
"parent_id": 2
},
{
"id": 19,
"name": "Water",
"parent_id": 2
},
{
"id": 47,
"name": "IP Bar",
"parent_id": 2
}
]
},
{
"id": 3,
"name": "Disposable",
"parent_id": 0,
"children": [
{
"id": 21,
"name": "Disposable",
"parent_id": 3
}
]
},
{
"id": 4,
"name": "SOE",
"parent_id": 0,
"children": [
{
"id": 20,
"name": "Cleaning Materials",
"parent_id": 4
},
{
"id": 22,
"name": "Chinaware",
"parent_id": 4
}
]
}
];
I get to all the nodes in the tree
function traverse(categories) {
categories.forEach(function (category) {
if (category.children && category.children.length) {
traverse(category.children);
}
else {
}
}, this);
}

You can use recursion and create a function using forEach loop.
var arr = [{"id":1,"name":"Food","parent_id":0,"children":[{"id":5,"name":"Dry Food Items","parent_id":1,"children":[{"id":11,"name":"Local Dry Food Items","parent_id":5},{"id":12,"name":"Thai Dry Food Items","parent_id":5},{"id":60,"name":"Others","parent_id":5}]},{"id":6,"name":"Fruits","parent_id":1},{"id":7,"name":"LG Branded","parent_id":1},{"id":8,"name":"Meat","parent_id":1},{"id":9,"name":"Sea food","parent_id":1},{"id":10,"name":"Vegetables","parent_id":1,"children":[{"id":14,"name":"Local Vegetables","parent_id":10},{"id":15,"name":"Thai Vegetables","parent_id":10}]},{"id":38,"name":"Frozen","parent_id":1},{"id":39,"name":"IP Kitchen","parent_id":1,"children":[{"id":40,"name":"IP Meat","parent_id":39},{"id":41,"name":"IP Starter","parent_id":39},{"id":42,"name":"IP Ingredients","parent_id":39},{"id":43,"name":"IP Sauce","parent_id":39},{"id":44,"name":"IP Seafood","parent_id":39},{"id":45,"name":"IP Starter","parent_id":39},{"id":46,"name":"IP Desert","parent_id":39}]}]},{"id":2,"name":"Beverage","parent_id":0,"children":[{"id":16,"name":"Bar","parent_id":2},{"id":17,"name":"Coffee & Tea","parent_id":2},{"id":18,"name":"In Can","parent_id":2},{"id":19,"name":"Water","parent_id":2},{"id":47,"name":"IP Bar","parent_id":2}]},{"id":3,"name":"Disposable","parent_id":0,"children":[{"id":21,"name":"Disposable","parent_id":3}]},{"id":4,"name":"SOE","parent_id":0,"children":[{"id":20,"name":"Cleaning Materials","parent_id":4},{"id":22,"name":"Chinaware","parent_id":4}]}]
function getNames(data) {
var result = [];
function loop(data, c) {
data.forEach(function (e) {
var name = !c.length ? e.name : c + '->' + e.name;
if (e.children) { loop(e.children, name); }
else {
result.push({ name: name });
}
});
}
loop(data, '');
return result;
}
console.log(getNames(arr))

Categories

Resources