12025

RxJs move array of objects to root array

Question:

I am getting below set of data via Observable

[ 0: {id: "12321", itemName: "Item 1", category: "All"}, 1: [ 0: {id: "423423", itemName: "Sub Item 1", category: "subcat"}, 1: {id: "413212", itemName: "Sub Item 2", category: "subcat"} ], 2: {id: "65655", itemName: "Item 2", category: "All"}, 3: {id: "87877", itemName: "Item 3", category: "All"}, 4: [ 0: {id: "354345", itemName: "Sub Item 1", category: "subcat"}, 1: {id: "123434", itemName: "Sub Item 2", category: "subcat"}, 2: {id: "765767", itemName: "Sub Item 3", category: "subcat"}, 3: {id: "854643", itemName: "Sub Item 4", category: "subcat"}, ] ]

I am trying to move all the objects within array to root array. The expected result is

[ 0: {id: "12321", itemName: "Item 1", category: "All"}, 1: {id: "423423", itemName: "Sub Item 1", category: "subcat"}, 2: {id: "413212", itemName: "Sub Item 2", category: "subcat"} 3: {id: "65655", itemName: "Item 2", category: "All"}, 4: {id: "87877", itemName: "Item 3", category: "All"}, 5: {id: "354345", itemName: "Sub Item 1", category: "subcat"}, 6: {id: "123434", itemName: "Sub Item 2", category: "subcat"}, 7: {id: "765767", itemName: "Sub Item 3", category: "subcat"}, 8: {id: "854643", itemName: "Sub Item 4", category: "subcat"}, ]

<strong>This is how the data looks on console</strong>

<a href="https://i.stack.imgur.com/tu7UM.png" rel="nofollow"><img alt="Data Sample" class="b-lazy" data-src="https://i.stack.imgur.com/tu7UM.png" data-original="https://i.stack.imgur.com/tu7UM.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Below is what I've and tried so far.

lstCategories: Observable<any>; this.lstCategories = ..... .flatMap(records => Observable.combineLatest(records)) .map(da => { return da.map(mda => { //if it is array then map each object in array. if(mda.length){ return mda.map(smda => { return Observable.of(smda); }) }else { return mda; } }) });

console.log(da) i.e. first map displays the type of data I am getting. I am checking length of each element in array and mapping it back.

What is that I am missing here?

Answer1:

Based on the image, you have an array of objects and array. You can flatten it using [].concat(...data). Use array#concat with spread syntax.

<pre class="snippet-code-js lang-js prettyprint-override">var data = [{id: "12321", itemName: "Item 1", category: "All"}, [{id: "423423", itemName: "Sub Item 1", category: "subcat"}, {id: "413212", itemName: "Sub Item 2", category: "subcat"}],{id: "65655", itemName: "Item 2", category: "All"}, {id:"87877", itemName: "Item 3", category: "All"}, [{id: "354345", itemName: "Sub Item 1", category: "subcat"}, {id: "123434", itemName: "Sub Item 2", category: "subcat"}, {id: "765767", itemName: "Sub Item 3", category: "subcat"}, {id: "854643",itemName: "Sub Item 4", category: "subcat"}]], result = [].concat(...data); console.log(result);

Recommend

  • value from Observable within Observable using angularfire2 firestore
  • Map doesn't exist on Observable with angular 6.0.0 and rxjs 6.1.0
  • Is there any way to concat http response arrays, in just one array in angular 2
  • Java API for parsing/recognition but not executing SQL against a DB
  • How can I further reduce my Apache Spark task size
  • How to execute 2 Observables in parallel, ignoring their results and execute next Observable
  • How to set the navigation bar to the top in Table View?
  • SQL: Getting the physical size of a subset of a table
  • How do I remove all but some records based on a threshold?
  • How do I get the list of bad records that didn't load in Bigquery?
  • Elasticsearch script query involving root and nested values
  • Sequential (transactional) API calls in angular 4 with state management
  • JBoss External Properties Files in Classpath
  • MySQL Order by column = x, column asc?
  • htaccess add www if not subdomain, if subdomain remove www
  • PHP buffered output depending on server setting?
  • Functions in global context
  • Jenkins: How To Build multiple projects from a TFS repository?
  • Is possible to count alias result on mysql
  • Check if a string to interpolate provides expected placeholders
  • Importing jscolor library in angular 2
  • Release, debug version and Authorization Google?
  • Websockets service method fails during R startup
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • How to get next/previous record number?
  • Apache 2.4 - remove | delete | uninstall
  • Numpy divide by zero. Why?
  • php design question - will a Helper help here?
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • Trying to get generic when generic is not available
  • embed rChart in Markdown
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How can i traverse a binary tree from right to left in java?
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal