search

src/app/_services/stock.service.ts

@@ -1,9 +1,14 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import {JsonpModule, Jsonp, Response} from '@angular/http';
+
 
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map'
 
+const httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'text/html' })
+}
 
 @Injectable({
   providedIn: 'root'
@@ -11,32 +16,28 @@ import 'rxjs/add/operator/map'
 export class StockService {
 
 	constructor(
-		private http: HttpClient
+		private http: HttpClient,
+		private jsonp: Jsonp
 	) { }
 
 	getLogos( symbols ) {
 
 		var symbolsComma = "";
-		var count = 0;
+		var commaCheck = false;
 
-		//console.log(symbols)
 		for( var symbol in symbols ){
-			if( count != 0 ){
+			if( commaCheck ){
 				symbolsComma += ",";
-				
 			}
-			count++;
-			//console.log(symbols[symbol].Symbol)
+			commaCheck = true;
 			symbolsComma += symbols[symbol].Symbol;
 	
 		}
-		console.log(symbolsComma);
 		
-
-		const url = "https://api.iextrading.com/1.0/stock/market/batch?symbols=" + symbolsComma + "&types=logo";
-		return this.http.get<any>(url)
+		const url = "https://api.iextrading.com/1.0/stock/market/batch?symbols=" + symbolsComma + "&types=logo&callback=JSONP_CALLBACK";
+		return this.jsonp.request(url)
 		    .map(logos => {
-				return logos;
+				return logos["_body"];
             });
 
 	}

src/app/app.module.ts

@@ -9,8 +9,8 @@ import { SearchViewComponent } from './search-view/search-view.component';
 import { StockViewComponent } from './stock-view/stock-view.component';
 
 import { HttpClientModule }    from '@angular/common/http';
+import { JsonpModule } from '@angular/http';
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
-//import { InMemoryDataService }  from './_mockdata/mock-data-users';
 import { InMemoryDataService }  from './_mockdata/mock-data-nasdaq';
 
 import { AlertComponent } from './_helpers/alert.component';
@@ -55,7 +55,8 @@ import {MatListModule} from '@angular/material/list';
     MatButtonModule,
     MatIconModule,
     MatDividerModule,
-    MatListModule
+    MatListModule,
+    JsonpModule 
   ],
   providers: [
     AlertService,

src/app/search-view/search-view.component.html

@@ -17,7 +17,13 @@
 
 		<div>
 			<mat-list>
-				<mat-list-item *ngFor="let company of searchResults" (click)="onSelect(company.Symbol)"> {{company.Name}} </mat-list-item>
+				<mat-list-item *ngFor="let company of searchResults" (click)="onSelect(company.Symbol)">
+					<div class="fullWidth">
+						<p class="alignleft">{{company.Name}}</p>
+						<img class="ipoMiniLogo alignright" src="{{searchResultLogos[company.Symbol].logo.url}}">
+						<div style="clear: both;"></div>
+					</div>
+				</mat-list-item>
 			</mat-list>
 		</div>
 

src/app/search-view/search-view.component.ts

@@ -25,6 +25,7 @@ export class SearchViewComponent implements OnInit {
 	}
 
 	searchCompany( searchData ){
+		if( searchData.length > 3 ){
 			this.nasdaqSearchService.query( searchData )
 			.subscribe(
 				data => {
@@ -47,6 +48,7 @@ export class SearchViewComponent implements OnInit {
 					//this.alertService.error( "Bad username or password" );
 				});
 		}
+	}
 
 	getLogos( companySearchResults ){
 
@@ -60,12 +62,12 @@ export class SearchViewComponent implements OnInit {
 						//console.log(data[0].userName);
 						//localStorage.setItem('currentUser', JSON.stringify(data[0]));
 						//this.router.navigate(["home"]);
-						
+						console.log("good?");
 						console.log( data );
 						//this.searchResults = data;
 						//this.companySearchResults( data );
-						//this.searchResults = companySearchResults;
-						//this.searchResultLogos = data;
+						this.searchResults = companySearchResults;
+						this.searchResultLogos = data;
 					}
 				},
 				error => {

src/styles.css

@@ -31,3 +31,10 @@
 .alert-danger mat-card{
 	background-color: pink;
 }
+
+.ipoMiniLogo{
+	width:35px;
+	height: auto;
+	border-radius: 50%;
+	text-align: right;
+}