Fully working table org search and better error

src/app/dashboard/add-data.component.html

@@ -30,8 +30,8 @@
               <input type="text" class="form-control" placeholder="Organisation Name" [(ngModel)]="submitOrg.name" (input)="organisationSearch($event)" (ngModelChange)="transactionFormValidate()">
               <span class="help-block">This is a help text</span>
             </div>
-          <org-result organisation="Trouble"></org-result>
           </div>
+          <org-table *ngIf="storeList != null" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
           <div *ngIf="showAddStore">
             <div class="form-group row">
               <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Street Name</strong></label>

src/app/dashboard/add-data.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Validators, FormBuilder, FormGroup } from '@angular/forms';
 import { Http, Response } from '@angular/http';
 import { ApiService } from '../providers/api-service';
-import { OrgResultComponent } from '../shared/org-result.component';
+import { OrgTableComponent } from '../shared/org-table.component';
 import * as moment from 'moment';
 import 'rxjs/add/operator/map';
 
@@ -229,8 +229,10 @@ export class AddDataComponent {
         console.log('Upload Error');
         console.log(error);
         try {
-          let jsonError = JSON.parse(error.body);
-          this.transactionFormStatusError = JSON.stringify(jsonError.status) + 'Error, ' + JSON.stringify(jsonError.message);
+          console.log(error.error);
+          let jsonError = error.json();
+          console.log("boop");
+          this.transactionFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
         } catch(e) {
           this.transactionFormStatusError = 'There was a server error, please try again later.';
         }

src/app/dashboard/dashboard.module.ts

@@ -11,6 +11,7 @@ import { AddDataComponent } from './add-data.component';
 
 import { DashboardRoutingModule } from './dashboard.routing';
 import { OrgResultComponent } from '../shared/org-result.component';
+import { OrgTableComponent } from '../shared/org-table.component';
 
 @NgModule({
   imports: [
@@ -28,6 +29,7 @@ import { OrgResultComponent } from '../shared/org-result.component';
     AccountEditComponent,
     AddDataComponent,
     OrgResultComponent,
+    OrgTableComponent,
   ]
 })
 export class DashboardModule { }

src/app/shared/org-result.component.html

@@ -0,0 +1,4 @@
+<td (click)="orgClick()">{{org.name}}</td>
+<td (click)="orgClick()">{{org.street_name}}</td>
+<td (click)="orgClick()">{{org.town}}</td>
+<td (click)="orgClick()">{{org.postcode}}</td>

src/app/shared/org-result.component.ts

@@ -1,10 +1,24 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+interface OrgData {
+  id: number;
+  name: string;
+  street_name: string;
+  town: string;
+  postcode: string;
+}
 
 @Component({
-  selector: 'org-result',
-  template:'banana {{ organisation }}',
+  selector: '[org-result]',
+  templateUrl: 'org-result.component.html',
 })
 export class OrgResultComponent {
-  @Input() organisation: any;
+  @Input() public org: OrgData;
+  @Output() public onClick = new EventEmitter();
 
+  public orgClick(): void {
+    this.onClick.emit(
+      this.org
+    )
+  }
 }

src/app/shared/org-table.component.html

@@ -0,0 +1,19 @@
+<div class="form-group row">
+  <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Search Results</strong></label>
+  <div class="col-md-9">
+    <span class="help-block"><strong>Select an Organisation from the table below</strong></span>
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th>Organisation Name</th>
+          <th>Street Name</th>
+          <th>Town</th>
+          <th>Postcode</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr org-result *ngFor="let org of orgList" [org]="org" (onClick)="orgClick($event)"></tr>
+      </tbody>
+    </table>
+  </div>
+</div>

src/app/shared/org-table.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { OrgResultComponent } from '../shared/org-result.component';
+
+interface OrgData {
+  id: number;
+  name: string;
+  street_name: string;
+  town: string;
+  postcode: string;
+}
+
+@Component({
+  selector: 'org-table',
+  templateUrl: 'org-table.component.html',
+})
+export class OrgTableComponent {
+  @Input() public orgList: Array<OrgData>;
+  @Output() public onClick = new EventEmitter();
+
+  public orgClick(event: any): void {
+    this.onClick.emit( event );
+  }
+}