how to write object in array?

Question

I have a problem: I have an array named _daysConfig<DayConfig>

If I fill it like this, it works:

_daysConfig: DayConfig[] = [
{
  date: new Date('Wed Jul 22 2020 21:06:00 GMT+0200 (heure d’été d’Europe centrale)'),
  subTitle: 'x',
  marked: true
},
{
  date: new Date('Wed Jul 31 2020 21:06:00 GMT+0200 (heure d’été d’Europe centrale)'),
  subTitle: 'y',
  marked: true
},  ];

But if I fill it from another array(allEvents) with .push(), it does not work anymore:

    this.allEvents.forEach(element => {
  this._daysConfig.push(
    {
      date: new Date(element.startTime),
      subTitle: 'x',
      marked: true
    },
  );
});

When I look in the chrome console, it looks like this:

Someone could help me, please?

EDIT :

I tried this

Try pushing the "DayConfig" object instead of normal object.

this.allEvents.forEach(element => { 
    this._daysConfig.push(
        new DayConfig({
            date: new Date(element.startTime),
            subTitle: 'x',
            marked: true
        })
    );
});

Or something like this

this.allEvents.forEach(element => { 
  const obj = new DayConfig();
  obj.date = new Date(element.startTime);
  obj.subTitle = 'x';
  obj.marked = true;
  this._daysConfig.push(obj);
});

But it didn't work.

DayConfig is not an object but a type.

Here is my code :

 import { Component, ViewChild } from '@angular/core';
import { CalendarComponentOptions, CalendarComponent, DayConfig } from '../../assets/ion2-calendar';
import * as moment from 'moment';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {


  @ViewChild('calendar', { read: CalendarComponent }) calendarRef: CalendarComponent;

  dateRange: { from: string; to: string; };
  date: string;
  type: 'string';
  typeEvent: string = 'task';
  dateDay: number;
  viewDate: Date;
  user: string = 'Clémentine';
  showAddEvent: boolean;
  i = 0;

  newEvent = {
    user: '',
    title: '',
    description: '',
    startTime: '',
    startHour: '',
    place: '',
    repeat: '',
    altern: false
  };

  allEvents = [];
  _daysConfig: DayConfig[] = [];
  _daysConfig2: DayConfig[] = [
    {
      date: new Date('Wed Jul 22 2020 21:06:00 GMT+0200 (heure d’été d’Europe centrale)'),
      subTitle: 'x',
      marked: true
    },
    {
      date: new Date('Wed Jul 31 2020 21:06:00 GMT+0200 (heure d’été d’Europe centrale)'),
      subTitle: 'y',
      marked: true
    },
  ];

  optionsRange: CalendarComponentOptions = {
    monthFormat: 'MMMM YYYY',
    monthPickerFormat: ['Janv', 'Févr', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
    pickMode: 'single',
    color: 'primary',
    weekdays: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
    weekStart: 0,
    from: new Date(),
    showAdjacentMonthDay: false,
    showToggleButtons: true,
    daysConfig: this._daysConfig

  };

  constructor(public calendarComponent: CalendarComponent, public afDB: AngularFireDatabase) {
    moment.locale('fr-ch');
    this.loadEvents();
    console.log('DaysConfig :');
    console.log(this._daysConfig);
    console.log('daysConfig2 :');
    console.log(this._daysConfig2);
  }

  userChange($event) {
    if ($event.detail.value === 'Clémentine') {
      this.user = 'Clémentine';
    } else {
      this.user = 'Bertrand';
    }
  }

  convertDate(date) {
    this.date = moment().format('YYYY-MM-DD');
    return date;
  }

  showHideForm() {
    this.showAddEvent = !this.showAddEvent;
    if (this.typeEvent === 'rdv') {
      this.typeEvent = 'task';
    }
  }

  addEvent() {
    this.afDB.list('Events').push({
      user: this.user,
      typeEvent: this.typeEvent,
      title: this.newEvent.title,
      startTime: this.newEvent.startTime,
      description: this.newEvent.description,
      startHour: this.newEvent.startHour,
      place: this.newEvent.place,
      repeat: this.newEvent.repeat,
      altern: this.newEvent.altern
    });
    this.showHideForm();
  }

  loadEvents() {
    this.afDB.list('Events').snapshotChanges(['child_added']).subscribe(actions => {
      actions.forEach(action => {
        this.allEvents.push({
          user: action.payload.exportVal().user,
          typeEvent: action.payload.exportVal().typeEvent,
          title: action.payload.exportVal().title,
          startTime: new Date(action.payload.exportVal().startTime),
          description: action.payload.exportVal().description,
          startHour: new Date(action.payload.exportVal().startHour),
          place: action.payload.exportVal().place,
          repeat: action.payload.exportVal().repeat,
          altern: action.payload.exportVal().altern
        });
      });
      this.daysConfig();
      console.log('AllEvents :');
      console.log(this.allEvents);
    });
    this.i = 0;
  }


  daysConfig() {
    this.allEvents.forEach(element => {
      this._daysConfig.push(
        {
          date: new Date(element.startTime),
          subTitle: 'x',
          marked: true
        },
      );
    });
    this.i++;
  }

  getCalendarViewDate() {
    let viewDate = this.calendarRef.getViewDate()._d;
    viewDate = viewDate.toString().substring(0, 8) + this.dateDay + viewDate.toString().substring(10, 100);
    return viewDate;
  }

  setCalendarViewDate() {
    this.calendarRef.setViewDate('2018-02-01');
  }

  onChange($event) {
    this.dateDay = $event.title;
    this.newEvent.startTime = this.getCalendarViewDate();
  }

  typeEventChange($event) {
    if ($event.detail.value === 'task') {
      this.typeEvent = 'task';
    } else {
      this.typeEvent = 'rdv';
    }
  }
}

And here is my chrome console : Chrome Console

You need to provide more context. As is right now is a little bit hard to understand the problem. You are using the this keyword but we don't know where is that coming from. — Renan Cidale
– Renan Cidale, Commented Jul 18, 2020 at 8:51
Could you please add the full code you have tried ? It is hard to understand like this. By assuming the context , here is the working demo and it is working fine : stackblitz.com/edit/angular-dhyzxb — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Jul 18, 2020 at 8:58

Stefan · Accepted Answer · 2020-07-18 12:57:06Z

1

I think the problem here has something to do with timing: in the constructor you call the loadEvents() method. This method subscribes to an observable - all the code in the subscribe block will be executed only when the result of this.afDB.list('Events').snapshotChanges(['child_added']) has been returned. This might take a little time. Your console.log() calls will propably be executed before - so your _daysConfig array is still empty. There should be a different console output if you move the log messages from the constructor to the end of the daysConfig() method.

One more thing: you can't use new DayConfig() as DayConfig is only a type and not a class.

answered Jul 18, 2020 at 12:57

Stefan

945 bronze badges

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

6 Comments

Bertrand PETIT Over a year ago

Thank you Stefan ! You're right ! those console.log() are on the wrong place and my dayconfig works if i open and close my add event form. Now i have to find the right way to load my daysconfig on my calendar on page's loading

Stefan Over a year ago

You could load the daysconfig in the ngOnInit() method. Don't forget to add implements OnInit to your class header.

Bertrand PETIT Over a year ago

I did what you said me to do... but now, data does not pass from the allEvent array to the _daysConfig array...

Stefan Over a year ago

Could you put your code on StackBlitz? That makes it easier to help you.

Stefan Over a year ago

I've forked the stackblitz project and modified the code a bit: stackblitz.com/edit/ionic-g7umwp The dayConfig() method is gone and its code has been moved to the loadEvents() method. This saves you also one loop over all of the events.

|

Athreya M R Bhatt · Accepted Answer · 2020-07-18 08:56:56Z

0

Try pushing the "DayConfig" object instead of normal object.

this.allEvents.forEach(element => { 
        this._daysConfig.push(
            new DayConfig({
                date: new Date(element.startTime),
                subTitle: 'x',
                marked: true
            })
        );
    });

Or something like this

this.allEvents.forEach(element => { 
    const obj = new DayConfig();
    obj.date = new Date(element.startTime);
    obj.subTitle = 'x';
    obj.marked = true;
    this._daysConfig.push(obj);
});

answered Jul 18, 2020 at 8:56

Athreya M R Bhatt

1351 silver badge8 bronze badges

Collectives™ on Stack Overflow

how to write object in array?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related