make a component for load json files

Author: David Martínez Ros

src/app/app.component.html

@@ -1,3 +1,5 @@
 <h1>Hello from the {{ title }}!</h1>
 
+<app-load></app-load>
+
 <app-tree></app-tree>

src/app/app.module.ts

@@ -6,12 +6,14 @@ import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 import { NodeTreeComponent } from './node-tree/node-tree.component';
 import { TreeComponent } from './tree/tree.component';
+import { LoadComponent } from './load/load.component';
 
 @NgModule({
  declarations: [
  AppComponent,
  NodeTreeComponent,
- TreeComponent
+ TreeComponent,
+ LoadComponent
  ],
  imports: [
  BrowserModule,

src/app/load/load.component.css

@@ -0,0 +1 @@
+Load the file <input type="file" name="file" [(ngModel)]="model"/>

src/app/load/load.component.html

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { LoadComponent } from './load.component';
+
+describe('LoadComponent', () => {
+ let component: LoadComponent;
+ let fixture: ComponentFixture<LoadComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ LoadComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(LoadComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/load/load.component.spec.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Node } from '../node.class';
+
+import { ReturnsJsonArrayService } from '../returns-json-array.service';
+
+@Component({
+ selector: 'app-load',
+ templateUrl: './load.component.html',
+ styleUrls: ['./load.component.css'],
+ providers: [ReturnsJsonArrayService]
+})
+export class LoadComponent implements OnInit {
+
+ model: any;
+
+ static tree: Observable<Array<Node>>;
+
+ constructor(private service: ReturnsJsonArrayService) {
+ this.loadFile();
+ console.log("AppComponent.data:" + LoadComponent.tree);
+ }
+
+ ngOnInit() {
+
+ }
+
+ loadFile() {
+ if(this.model != null) {
+ LoadComponent.tree = this.service.getTreeFromFile(this.model);
+ }
+ LoadComponent.tree = this.service.getTree();
+ }
+
+}

src/app/load/load.component.ts

@@ -18,4 +18,15 @@ export class ReturnsJsonArrayService {
  .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }
 
+ getTreeFromFile(model: any): Observable<any> {
+ /*return this.http.request('./data/people.json')
+ .map(res => res.json());*/
+
+ return this.http.get(model)
+ // ...and calling .json() on the response to return data
+ .map((res:Response) => res.json())
+ //...errors if any
+ .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
+ }
+
 }

src/app/returns-json-array.service.ts

@@ -1,23 +1,26 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
-import { ReturnsJsonArrayService } from '../returns-json-array.service';
-
 import { Node } from '../node.class';
 
+import { LoadComponent } from '../load/load.component';
+
 @Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
- styleUrls: ['./tree.component.css'],
- providers: [ReturnsJsonArrayService]
+ styleUrls: ['./tree.component.css']
 })
-export class TreeComponent {
+export class TreeComponent implements OnInit {
 
  tree: Observable<Array<Node>>;
 
- constructor(private service: ReturnsJsonArrayService) {
- this.tree = service.getTree();
+ constructor() {
+ this.tree = LoadComponent.tree;
  console.log("AppComponent.data:" + this.tree);
  }
 
+ ngOnInit() {
+
+ }
+
 }

src/app/tree/tree.component.ts

@@ -68,6 +68,18 @@
  "name": "Node 2.3",
  "idParent": 2,
  "sheet": true
+ },
+ {
+ "id": 24,
+ "name": "Node 2.4",
+ "idParent": 2,
+ "sheet": true
+ },
+ {
+ "id": 25,
+ "name": "Node 2.5",
+ "idParent": 2,
+ "sheet": true
  }
  ]
  },
@@ -104,6 +116,39 @@
  "name": "Node 3.3",
  "idParent": 3,
  "sheet": true
+ },
+ {
+ "id": 34,
+ "name": "Node 3.4",
+ "idParent": 3,
+ "sheet": false,
+ "childs":
+ [
+ {
+ "id": 341,
+ "name": "Node 3.4.1",
+ "idParent": 34,
+ "sheet": true
+ },
+ {
+ "id": 342,
+ "name": "Node 3.4.2",
+ "idParent": 34,
+ "sheet": true
+ },
+ {
+ "id": 343,
+ "name": "Node 3.4.3",
+ "idParent": 34,
+ "sheet": true
+ },
+ {
+ "id": 344,
+ "name": "Node 3.4.4",
+ "idParent": 34,
+ "sheet": true
+ }
+ ]
  }
  ]
  }