ES6 class default value with array

Question

everything works fine until it gets to the 2nd occurrence of contact.

TypeError: Cannot set property 'name' of undefined

Because the contact default in constructor has only 1 occurrence. Any way to work around it?

class Cust {
  constructor(custData) {

    this.address = {
      countryCode: null,
      address1: null,
      address2: null,
      city: null,
      countrySubDivision: null,
      postalCode: null
    },
    this.groupId = null;
    this.contact = [{ name: null, phone: null }];  
    //this.contact.phone = custData.contact.phone    
    this.state = this._getState(custData.status || null);

    this._setData(custData);
  }

  _getState(status) {
    let state = (status == 'active' ? 'good' : 'bad');
    return state;
  }
  _setData(data, prefix, index) {
    let result;
    for (let key in data) {
      let value = data[key];
      let valueIsNullOrEmpty = !value;
      if (!valueIsNullOrEmpty && typeof value === 'object') {
        if (Array.isArray(value)) {
          value = value
            .map((subProperty, index) => this._setData(subProperty, key, index))
            .filter((subProperty) => Object.keys(subProperty).length > 0);
          valueIsNullOrEmpty = value.length === 0;
          continue;
        } else {
          value = this._setData(value, key);
          valueIsNullOrEmpty = Object.keys(value).length === 0;
          continue;
        }
      }
      if (prefix) {
        if (index >= 0) {
          this[prefix][index][key] = data[key];
        }
        else {
          this[prefix][key] = data[key];
        }
      }
      else {
        this[key] = data[key]
      }
      result = data[key];

    }
    console.log(JSON.stringify(this));
    return result;
  }
}

var custData = {
  id: 1,
  name: "Barr",
  //  groupId: 2,
  status: "active",
  address: {
    countryCode: "USA",
    address1: "123 main street",
    address2: null,
    city: "Chicago",
    postalCode: "85001"
  }, contact: [
    {
      phone: "222-222-2222"
    },
    {
      name: "Tim"
    }]
}
var cust = new Cust(custData);

It would help to know which line in the code excerpt the error message relates to. Also, when saying "2nd occurrence of contact", do you include the commented-out line, or not? — Sarah Groß
– Sarah Groß, Commented May 2, 2019 at 16:06
the error line is this[prefix][index][key] = data[key]; "2nd occurrence of contact" is in custData contact: [ { phone: "222-222-2222" }, { name: "Tim" }] — Shawn
– Shawn, Commented May 2, 2019 at 16:14
You call _setData recursively, yet it does not access the data recursively but only accesses the first depth. — Jonas Wilms
– Jonas Wilms, Commented May 2, 2019 at 16:18

Jonas Wilms · Accepted Answer · 2019-05-02 16:25:02Z

1

You are recursively formatting the data, but you always try to change the mutated data from this, e.g.

  this[key]

That will work for depth 1, but for a depth of let's say 5 it gets complicated:

 this[key1][key2][key3][key4][key5]

you get the point (and thats where your code actually fails, accessing a property of a nested object with a depth greater than 2).

this will never work. Instead pass the object to modify into the method (which can be a function then), you could also keep it immutable then by returning a new object (that will make debugging easier):

 function format(obj) {
    const result = {};
   //...
   return result;
 }

Then you can easily call format with nested objects. From inside the class that can be called as:

  Object.assign(this, format(data));

answered May 2, 2019 at 16:25

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

1 Comment

Shawn Over a year ago

I was in the wrong direction. Thank you for pointing that out. Resolved.

Collectives™ on Stack Overflow

ES6 class default value with array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related