Friday, October 13, 2017

Angular backend integration problem...custom parser

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

  
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


Here's my component service
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 ],
  ...
})

No comments:

Post a Comment

Oblivion

 Between the fascination of an upcoming pandemic ridden college football season, Taylor Swift, and Kim Kardashian, wildfires, crazier weathe...