Angular 6: how do I add a JSON string to an existing JSON string-array?

So I have a Typescript component with a constructor that looks like this:

constructor(private http: HttpClient) {
this.http.get('/api/values/users').subscribe(result => {
this.values = result as string[];
}, error => console.error(error));
}


and as you can see it makes a string array and stores it in values. I later display this string[] in the html with something like this snippet

<tr *ngFor="let value of values; index as i">
<td>
<input [(ngModel)]="value.id" class="form-control" type="text" name="{{value.id}}" />
</td>
</tr>


the problem is I later want to add a new element to the string array in JSON format. But when I write

this.values.push("{id: 1, username: , firstName: , lastName: , token: ,}");


It doesn't match the JSON format and so the string becomes:

0: {id: 2, name: "provider", password: "gps", roles: 4, status: 1}
1: {id: 4, name: "Josh", password: "pass", roles: 1, status: 1}
2: {id: 5, name: "admin", password: "admin", roles: 1, status: 1}
3: "{id: 1, username: , firstName: , lastName: , token: ,}"


notice the last value has double qoutes around it. This makes it so that the *ngFor that was aformentioned does not pick up on it as a JSON format and just thinks the fourth object here is just a regular string. Please help me!

Continue reading...