如何通过循环将属性推送到数组内对象内的数组？

Question

I am creating a small Angular application that operates like a scheduler. It allows users to give a Name, Start and End dates and check a boolean checkbox via a form.

My problem is I am trying to push the names of each user entry to specific dates in the array, eg 26/01/2019 will have the following names: "James", "Mark", "Luke" etc. all on the same day, depending on user entry via the form.

Within my loops, I am pushing a new object for each date within a date range, but cannot figure out a way to push the names to the string array within each date object.

I have tried to push the value to the array within another push, which keeps giving me errors.

I notice that if I set the value of the name field within the loop to "[value]" it doesn't error for some reason, not sure why.

After the loops have finished, I want to alert the resulting object array, but when I write the code to do so, I get an alert of "undefined". are the values not saving to the array?

    import { Component, OnInit } from '@angular/core';
    import { NgForm } from '@angular/forms';
    import { IPreferences } from '../ipreferences';
    import { DatePipe } from '@angular/common';
    import * as moment from 'moment';

    @Component({
      selector: 'app-customer-form',
      templateUrl: './customer-form.component.html',
      styleUrls: ['./customer-form.component.css']
    })
    export class CustomerFormComponent implements OnInit {
      title = 'Preference Form';
      preferences: IPreferences;
      dateObj: { }; // to be array of Date objects containing Name sub-arrays
      nameArray: string[];
      date = new Date();
      constructor(public datepipe: DatePipe) {
        this.preferences = {
          name: '',
          dateFrom: null,
          dateTo: null,
          everyday: null
        }
      }

      getDates(startDate, endDate){
          var dates = [],
            currentDate = startDate,
            addDays = function(days) {
              var date = new Date(this.valueOf());
              date.setDate(date.getDate() + days);
              return date;
            };
        while (currentDate <= endDate) {
          dates.push(currentDate);
          currentDate = addDays.call(currentDate, 1);
        }
        return dates;
      }

        savePreferences(form): void {
        var savedName:string = this.preferences.name;
        var formatDateFrom:string = moment(this.preferences.dateFrom).format("YYYY-MM-DD");
        var formatDateTo:string = moment(this.preferences.dateTo).format("YYYY-MM-DD");
        var savedEveryday:Boolean = this.preferences.everyday;
        var savedDateFrom:Date = new Date(formatDateFrom);
        var savedDateTo:Date = new Date(formatDateTo);
        var dateRange = this.getDates(savedDateFrom, savedDateTo);

        if(!!savedEveryday){
          for(var i = Number(savedDateFrom); i <= Number(moment(savedDateFrom).format("YYYY-MM-DD") + 90); i++){ // 90 and not infinite as due to time constraints i intended to print
            // the first 90 dates regardless of scenario, so if a user selected to receive marketing info daily it would of "appeared" to be daily

            this.nameArray.push(savedName) // pushing name strings to nameArray
          }
        }

        if(!savedEveryday) {
          dateRange.forEach(date => {
            this.nameArray.push(savedName) // pushing name strings to nameArray
        })

        this.dateObj[Number(this.date)] = {
          name: this.nameArray // attempting to set name property of objects in array to nameArray strings (2d array)
          }
        }
        alert(this.nameArray.length); // attempting to test by having a pop up of the object array (Dates) with their corresponding names returned

      }

Actual results are an alert of "undefined".

I am expecting to see an alert of objects within an array. Each object having a different date, and arrays of different names within each object.

Answer 1

The way i understood you question is that:- you want to add multiple names to the same date, and at the same time you want to add new dates.

You can actually do that using key value pair concept. Basic structure of key value pair is you need to create an empty object. let a = {}; and use this object to enter the values. For example: in the scenario you mentioned:

let dateObj = {};
let name_array =[]; // this is a temporary storage for the name;
let date =  new Date(); // this the date object that you are going to use as a key
name_array.push("James");
name_array.push("Mark");
name_array.push("Luke");

/*Below is the basic declaration of the key value pair in JavaScript*/
    dateObj[date] = {
    name: name_array
    }
/*if you want to retrieve content that is associated with the key(DATE) object use*/
dateObj[date].name // this will return all the name associated with that date object(key)

If you want to print all the contents use the for loop to iterate through the DATE (key value pair).

One more advantage of this method is that if you want to enter a name to an existing key you do not have to iterate through all the key value pair.

you can just use the code dateObj[date] = { name: name_array } If the key exist you can perform update if not a new key value pair is created. By this way you can avoid iterating though unnecessarily Its a more efficient way than others at-least to my knowledge

Answer 2

I was able to execute this code.

 let dateObj = {};
let name_array = []; // this is a temporary storage for the name;
let date =  new Date(); // this the date object that you are going to use as a key
name_array.push("James");
name_array.push("Mark");
name_array.push("Luke");
print(name_array);
/*Below is the basic declaration of the key value pair in JavaScript*/
    dateObj[date] = {
    name: name_array
    };

/*if you want to retrieve content that is associated with the key(DATE) object use*/
dateObj[date].name;
print(dateObj[date].name);

Can you post your code i can check and what went wrong

You can put the code in here: https://rextester.com/l/js_online_compiler and test