Angular doesn't merge/concat/extend my json object - json

Question

I have a problem concating 2 json objects together. Basicly my app is doing a get on my rest server every second and i'm only sending the newest data back so as angular is refreshing the whole object i found on google that i can concat the 2 jsons together (old and new) so i can keep everything. But the problem is that none of the concat/merge/extend functions work and i don't know what i'm missing.
data: any = null;
constructor(private _http: Http) {
setInterval(() => this.getLogs(), 1000)
}
public getLogs() {
return this._http.get('http://localhost')
.map((res: Response) => res)
.subscribe(data => {
if data._body != ''{
//this.data = data.json()
if this.data == null
this.data = data.json();
else
extend(this.data,data.json()); // PROBLEM HERE
}
console.log(this.data);
});
}
So far i tried this.data.concat(data.json()); if i try extend(this.data, data.json()) or merge(this.data, data.json()); I get errors saying that it's not defined. The concat function doesn't do anything. Doesn't trigger errors neither concat so i don't know what it is doing.
I'm logging the object everytme and i can see the object always stays at the first ever response i get (meaning it only does the if this.data == null).

Answer 1

https://www.w3schools.com/jsref/jsref_concat_array.asp states
The concat() method is used to join two or more arrays.
This method does not change the existing arrays, but returns a new
array, containing the values of the joined arrays.
So you need to concat the two arrays into the data variable
data: any = null;
constructor(private _http: Http) {
setInterval(() => this.getLogs(), 1000)
}
public getLogs() {
return this._http.get('http://localhost')
.map((res: Response) => res)
.subscribe(data => {
if data._body != ''{
//this.data = data.json()
if this.data == null
this.data = data.json();
else
this.data = this.data.concat(data.json());
}
console.log(this.data);
});
}

Answer 2

You can use spread operator to generate new object:
this.data = {...this.data, ...data.json()};
What this does is create a new object and then first migrates all the fields and values from this.data and then same thing from data.json() while overriding any existing fields that were already in this.data.

Answer 3

Not sure where you're getting extend from. That's not a function.
You can't concat two objects together. You're calling res.json(), so the return is no longer JSON. Even if you were, you can't just concat JSON strings together and expect the result to be valid.
You'd want to merge the objects together, which can be done with Object.assign(this.data, data.json() or a spread: this.data = {...this.data, ...data.json()}.
On top of that, you'd want to try/catch your JSON parsing before assigning. Plus, your map function is doing literally nothing. You can parse it there instead.
You can also streamline this by just initializing data to an empty object.
public data: any = {}
public getLogs() {
return this._http.get('http://localhost')
.map(res => res.json())
.filter(res => !!res) // ensure data exists
.subscribe(data => {
Object.assign(this.data, data);
});
}
Having said that, making a REST call every second seems like an egregious waste of resources and will put strain on Angular's change detection, with performance degrading as data increases. If the objects don't need to be merged, i.e. each call is segmented data, consider pushing new data to an array instead of an object. Plus, you might want to consider doing something a little more sane, like implementing an event stream like SSE (server sent events) on the backend.