-1

I want to create a dynamic menu bar by fetching data from two collections (supcat and cat) then combining the two to create a new array which i will access on page load for menu but the push() is not working. 

ngOnInit() {
this.cattest();}


cattest(){
var x;
this.supcatobj.fetchsupcat().subscribe(
  (res)=>
  {
    if(res.length!=0)
    {this.supcat=res;
      for(let x=0;x<this.supcat.length; x++)
      {
        this.catobj.fetchallcat(this.supcat[x]["_id"]).subscribe(
          (resp)=>
          {
            this.allcat=resp;

            for(let y=0;y<this.allcat.length;y++)
            {



            }
            this.testarr[x].push(this.supcat[x]["supcatname"],this.allcat);

          }
        );
      }
    }
  }
);}
Sukhanpreet Kaur
  • 1
  • Are you creating `this.testarr` somewhere else? I don't see it created in your code. Could you give the error it's providing? – DanielC Dec 07 '19 at 17:48
  • As @DanielC said where is the `testarr`. I would like to make a suggestion. Do not use please follow the https://stackoverflow.com/conduct – Kaan Taha Köken Dec 07 '19 at 18:26
  • Hello, Your question is on pushing data to an array in typescript. This has nothing to do with angular. You might get better responses by isolating the exact situation and testing or reposting that. Also, typescript is very focused on types, but I see none in your example. It makes me think you are actually talking about javascript. Lastly, you will help us enormously if you share the error you are getting. – unflores Dec 07 '19 at 18:34
  • core.js:15724 ERROR TypeError: Cannot read property '0' of undefined at SafeSubscriber._next (home.component.ts:54) – Sukhanpreet Kaur Dec 08 '19 at 04:22

1 Answers1

0

Instead of nesting subscribe() calls, I would try to compose separate observables for your two different collections and then use the combineLatest() operator to combine those into your desired array. It is hard to see exactly what you are working for, but conceptually it would be something like this: 

const supcat$ = this.supcatobj.fetchsupcat().pipe(filter(cat => cat.length > 0));
const allCat$ = this.catobj.fetchallcat();
const combinedCats$ = combineLatest(supcat$, allCat$);
const res$ = combinedCats$.pipe(map(res => {
  // do operation that involves both data sets
});

Remember that map() will return a new array. This way you will only need to subscribe to the one variable, and if you put it at the class level you could use the async pipe (|) in your template so it will unsubscribe automatically.

Nicholas K
  • 15,148
  • 7
  • 31
  • 57
slyDog
  • 49
  • 8
  • do you mean i should create another api to combine these .here is my schema //Super Category Schema var SupCategorySchema = new mongoose.Schema( {supcatname:String, supcatpic:String}, { versionKey: false } ); var managesupcat = mongoose.model("managesupcat", SupCategorySchema,"managesupcat"); //Category Schema var CategorySchema = new mongoose.Schema( {supcatid:String, catname:String, catpic:String}, { versionKey: false } ); var managecat = mongoose.model("managecat", CategorySchema,"managecat"); – Sukhanpreet Kaur Dec 08 '19 at 04:34