Convert JSON format to Array to use in data

Question

I'm using Angular Material datatable that requires a table to display data.

I would convert this JSON data format that backend sends to frontend

[{"text":"HELEO"},{"text":"HELEO"},{"text":"popopo"},{"text":":kjnkjn"},{"text":"jhjh"}]

To this format

[ { text: 'HELEO' },
  { text: 'HELEO' },
  { text: 'popopo' },
  { text: 'jhjh' } ]

Here's my service:

test: nomchamp[];
gettext(): Observable<any> {

  return this.http.get<nomchamp[]>(this.url)
    .map(res => { console.log(res); return this.test = JSON.parse(res) });

}

In my back-end:

router
.route("/")
.get(function (req, res, err) {

  // Get a database reference to our posts
  var db = admin.database();
  var ref = db.ref("/");

  // Attach an asynchronous callback to read the data at our posts reference
  ref.once("value", function (snapshot) {
    var list = [];
    snapshot.forEach(function (elem) {
      list.push(elem.val());
    })

    console.log(list);
    console.log(JSON.stringify(list))

    res.send(list);


  }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
    res.status(500).send(errorObject.code);
  });
});

I'm using stringify to be able to send data via res.send

Using JSON.parse I get this error :

JSON.parse: unexpected character at line 1 column 2 of the JSON data

Without using parse , data is not printed in my datatable.

The only case where it's working is when I use res.send(res) in back end but what I would is using res.write(JSON.stringify(res));

you've got your JSON = a string right? so, JSON.parse(thatString) will result in an object that will be similar to the one you require. Perhaps the issue is that you are not getting JSON, but data that is already JSON.parsed - which is why JSON.parse fails - because JSON.parse only accepts strings to parse — Jaromanda X
– Jaromanda X, Commented Feb 24, 2018 at 2:16

gb_spectrum · Accepted Answer · 2018-02-24 06:19:28Z

1

On your list variable, you can try this:

let list = [];
snapshot.forEach(function (elem) {
  list.push(elem.val());
});

list = JSON.stringify(list);
list = JSON.parse(list);

res.send(list);

Basically, you stringify first, and then you parse it; this way, you get rid of the double quotes on each key in the key-value pairs within each object.

edited Feb 24, 2018 at 6:19

answered Feb 24, 2018 at 1:59

gb_spectrum

2,3018 gold badges36 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hamza Haddad Over a year ago

But there is no ' test' variable in back end . Wii use test ?

gb_spectrum Over a year ago

Whops, that was an error. It's fixed. test should be list

Cacoon · Accepted Answer · 2018-02-24 05:46:10Z

Edit I may have mistunderstood what you are asking for, if so my apologies

I believe you can simply feed an angular material datatable with a object array populated by a JSON GET, I had to do it for my website and didnt want the fuss of a data table

<mat-table #table [dataSource]="dataSource">

      <!-- Position Column -->
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let project"> {{project.name}} </mat-cell>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="desc">
        <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
        <mat-cell *matCellDef="let project"> {{project.desc | slice:0:30}}... </mat-cell>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="tags">
        <mat-header-cell *matHeaderCellDef> Tags </mat-header-cell>
        <mat-cell *matCellDef="let project"> {{project.tags}} </mat-cell>
      </ng-container>

      <!-- Symbol Column -->
      <ng-container matColumnDef="type">
        <mat-header-cell *matHeaderCellDef> Type </mat-header-cell>
        <mat-cell *matCellDef="let project"> {{project.type}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="editUser(row)"></mat-row>
    </mat-table>

The variables I have added to my component.ts:

    displayedColumns = ['name', 'desc', 'tags', 'type'];
    projectDataURL:string = global.url + '/api/projects';
    project:any;
    dataSource;

Then in the constructor I have this:

this.subscription = this.getData.getDATA(this.projectDataURL).subscribe(
            data => {
                this.dataSource = new MatTableDataSource<any>(data);
            });

And finally I needed an interface for the data table:

export interface project {
    name: string;
    desc: number;
    tags: string;
    type: string;
}

While this isnt perfect for all use cases, for mine it worked great, hope this helps

Collectives™ on Stack Overflow

Convert JSON format to Array to use in data

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related