I found any number of back end parsing solutions that didn't work with my angular app, and I spent more time researching this problem in the long run. It took me 30 minutes (no kidding) to write a functioning string parser for approximately several hours of non solution to Angular typescript component interfacing.
Example parser
Example parser
class ParseObject{
toParseObj: string;
pitems: PostItem[];
constructor(objstr: string){
this.toParseObj = objstr;
this.pitems = [];
}
catchEscape(rs: string[]){
var i = 0;
var rtnrs: string[] = [];
var setcontinue: boolean = false;
for (let r of rs){
if (setcontinue){
i+=1;
setcontinue = false;
continue;
}
if (r[r.length-1] == "\\" ){
if ((i+1) < (rs.length-1)){
let fr: string = rs[i+1];
rtnrs.push(r+fr);
setcontinue = true;
}
}
else{
rtnrs.push(r);
}
i+=1
}
return rtnrs;
}
iterateParse(strP: string, strset: string[]){
for (let strp in strset){
var splitobj = strp.split(strP);
var nsplitobj = this.catchEscape(splitobj);
}
}
parseString(){
/*{"records":[{"name":"JimBob","message":"Hello katz!"},{"name":"Dr IQ","message":"Hello hello my name is Jim Bobby.
Been an old friend of shorty there!
Gratz!"}]}*/
//presumes user properly input string for formatting
var rs = this.toParseObj.split(']}');
console.log(rs);
//catch escapes
var nrs = this.catchEscape(rs);
console.log(nrs);
let nrs0 = nrs[0];
var nrs1 = nrs0.split('{"records":[');
var nrs2 = this.catchEscape(nrs1);
console.log(nrs2);
let nrs3 = nrs2[1];
var nrs4 = nrs3.split("},{");
var nrs5 = this.catchEscape(nrs4);
console.log(nrs5);
for (let nr of nrs5){
//split "," for key,value s
var nrs6 = nr.split(",");
var nrs7 = this.catchEscape(nrs6);
console.log(nrs7);
let nrs8 = nrs7[0].split("\"name\":");
let namevalue = nrs8[1].split("\"")[1];
console.log(nrs8);
let nrs9 = nrs7[1].split("\"message\":");
let messagevalue = nrs9[1].split("\"")[1];
this.pitems.push(new PostItem(namevalue,messagevalue));
}
return this.pitems;
}
}
class PostItem {
constructor(public name: string,
public message: string) {
}
}
You can build a custom service to be used with a promise
import { Component, Injectable, OnInit } from '@angular/core';
import {PVector} from './lineData';
import {frameResizer} from './frameResizer';
import { routerTransition } from './router.animations';
import {Guest } from './guest';
import {Http, Headers, RequestOptions, Response} from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
/*{"records":[{"name":"JimBob","message":"Hello katz!"},{"name":"Dr IQ","message":"Hello hello my name is Jim Bobby.
Been an old friend of shorty there!
Gratz!"}]}*/
class ParseObject{
toParseObj: string;
pitems: PostItem[];
constructor(objstr: string){
this.toParseObj = objstr;
this.pitems = [];
}
catchEscape(rs: string[]){
var i = 0;
var rtnrs: string[] = [];
var setcontinue: boolean = false;
for (let r of rs){
if (setcontinue){
i+=1;
setcontinue = false;
continue;
}
if (r[r.length-1] == "\\" ){
if ((i+1) < (rs.length-1)){
let fr: string = rs[i+1];
rtnrs.push(r+fr);
setcontinue = true;
}
}
else{
rtnrs.push(r);
}
i+=1
}
return rtnrs;
}
iterateParse(strP: string, strset: string[]){
for (let strp in strset){
var splitobj = strp.split(strP);
var nsplitobj = this.catchEscape(splitobj);
}
}
parseString(){
/*{"records":[{"name":"JimBob","message":"Hello katz!"},{"name":"Dr IQ","message":"Hello hello my name is Jim Bobby.
Been an old friend of shorty there!
Gratz!"}]}*/
//presumes user properly input string for formatting
var rs = this.toParseObj.split(']}');
console.log(rs);
//catch escapes
var nrs = this.catchEscape(rs);
console.log(nrs);
let nrs0 = nrs[0];
var nrs1 = nrs0.split('{"records":[');
var nrs2 = this.catchEscape(nrs1);
console.log(nrs2);
let nrs3 = nrs2[1];
var nrs4 = nrs3.split("},{");
var nrs5 = this.catchEscape(nrs4);
console.log(nrs5);
for (let nr of nrs5){
//split "," for key,value s
var nrs6 = nr.split(",");
var nrs7 = this.catchEscape(nrs6);
console.log(nrs7);
let nrs8 = nrs7[0].split("\"name\":");
let namevalue = nrs8[1].split("\"")[1];
console.log(nrs8);
let nrs9 = nrs7[1].split("\"message\":");
let messagevalue = nrs9[1].split("\"")[1];
this.pitems.push(new PostItem(namevalue,messagevalue));
}
return this.pitems;
}
}
class PostItem {
constructor(public name: string,
public message: string) {
}
}
@Injectable()
export class SearchService {
apiRoot: string = 'url/path/to/your/fetch.php';
results: PostItem[];
loading: boolean;
constructor(private http: Http) {
this.results = [];
this.loading = false;
}
search() {
let promise = new Promise((resolve, reject) => {
let apiURL = this.apiRoot;
this.http.get(apiURL)
.toPromise()
.then(
res => { // Success
console.log(res);
var json=JSON.stringify(res);
var jobj = JSON.parse(json);
var jobj2 = jobj["_body"];
//var jobj3 = JSON.parse(jobj2);
console.log(jobj2);
var parseobj = new ParseObject(jobj2);
this.results = parseobj.parseString();
this.results.reverse();
console.log(this.results);
/*
for (let job in jobj){
this.results.push(new PostItem(job.name, job.message));
}
//this.results = res.json().results.map
/*
this.results = jobj.map(item => {
return new PostItem(
item.name,
item.message
);
});*/
// this.results = res.json().results;
//posts = res.data.records;
resolve();
},
msg => { // Error
console.log("hit error");
reject(msg);
}
);
});
return promise;
}
}
Also make sure to make http global via app.module.ts and adding your service as a provider
with import { HttpModule } from '@angular/http';
...
@NgModule({
imports: [
..., HttpModule
],
declarations: [
...
],
providers: [ SearchService ],
...
})
