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

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).

Dumpen · Accepted Answer · 2018-01-25 16:20:53Z

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);
        });
    }

answered Jan 25, 2018 at 16:20

Dumpen

1,6726 gold badges22 silver badges36 bronze badges

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

1 Comment

John Over a year ago

Thank you. Seems illogical that it works that way tho. Fixed my thing anyway so thank you sir :D

Miroslav Jonas · Accepted Answer · 2018-01-25 16:24:36Z

1

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.

answered Jan 25, 2018 at 16:24

Miroslav Jonas

6,7172 gold badges30 silver badges42 bronze badges

Comments

joh04667 · Accepted Answer · 2018-01-25 16:34:50Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related