Model could not accept null value. It will throw up error.

[chardy]

Hi,

I got this API return:

json = {"id":2,"name":"Future Labs","address":null,"city":null,"state":null,"country":null,"website":null,"postal_code":null,"time_zone":null,"activated":null,"number_of_employees":null,"parent_company_id":null,"sales_rep_id":null,"customer_success_rep_id":null,"created_at":"2015-12-08T04:15:53 +0000"}

My model:

var Account = App.Model({
  id: App.Property(),
  name: App.Property(),
  address: App.Property(),
  city: App.Property(),
  state: App.Property(),
  country: App.Property(),
  postal_code: App.Property(),
  website: App.Property(),
  time_zone: App.Property(),
  activated: App.Property(),
  number_of_employees: App.Property(),
  parent_company_id: App.Property(),
  sales_rep_id: App.Property(),
  customer_success_rep_id: App.Property(),
  created_at: App.Property()
});

I got error of Argument mismatch for the value that contain null.

[Kanaye]

Hey @chardy,

I am not able to reproduce this error.
I took the Model and json-object from this issue but I'm not seeing any errors or debug warnings.
See my test jsfiddle here.

Can you copy&paste the error message here ?

[chardy]

This is my test form:

<form data-query="submit($parent.save)">
              <div class="field">
                <label>Name</label>
                <input type="text" data-query="val(name)"/>
              </div>
              <div class="field">
                <label>Address</label>
                <input type="text" data-query="val(address)"/>
              </div>
              <div class="field">
                <label>City</label>
                <input type="text" data-query="val(city)"/>
              </div>
              <div class="field">
                <label>State</label>
                <input type="text" data-query="val(state)"/>
              </div>
              <div class="field">
                <label>Country</label>
                <input type="text" data-query="val(country)"/>
              </div>
              <div class="field">
                <label>Website</label>
                <input type="text" data-query="val(website)"/>
              </div>
              <div class="field">
                <label>Timezone</label>
                <input type="text" data-query="val(time_zone)"/>
              </div>
              <div class="field">
                <label>Company Code</label>
                <input type="text" data-query="val(code)"/>
              </div>
              <div class="field">
                <label>Postal Code</label>
                <input type="text" data-query="val(postal_code)"/>
              </div>
              <div class="field">
                <label>Activated</label>
                <input type="text" data-query="val(activated)"/>
              </div>
              <div class="field">
                <label>Number of Employee</label>
                <input type="text" data-query="val(number_of_employees)"/>
              </div>
              <div class="field">
                <label>Other account</label>
                <input type="text" data-query="val(parent_company_id)"/>
              </div>
              <div class="field">
                <label>Sales</label>
                <input type="text" data-query="val(sales_rep_id)"/>
              </div>
              <div class="field">
                <label>Customer Success</label>
                <input type="text" data-query="val(customer_success_rep_id)"/>
              </div>

              <div class="field">
                <button type="submit" class="btn">Save</button>
              </div>
            </form>

I got this error in the attachment.

Thanks for helping.

[Kanaye]

Thank you.
That's not a bug with the Model itself.
The val()-data-query is not accepting null as a valid argument.
I think we should just add null to the valid values.

Also the form should work fine. These errors doesn't stop the execution.

[chardy]

Ok. Thanks.

[astoilkov]

Aha. I got it. Yeah I agree with you @Kanaye.

[chardy]

Yep, for some of the new adopter like me, we will see that as something wrong. Maybe the message return also could improve a bit.

[Kanaye]

Hey @chardy.

How could we improve the message(s) from your point of view.
The message(s) seem to be clear, at least for me.
But maybe because I know where they come

Btw. which browsers console is shown in your screenshot above?
In a working browser the message looks different:

[chardy]

Hi @Kanaye ,

That browser screenshots is from Chrome. To counter that, I am actually wrote a function to set any response data JSON key which the value is null to be deleted before I pass in to .reset() of a Model. Then solve this issue.

function removeNullsInObject(obj) {
  if( typeof obj === 'string' ){ return; }
  $.each(obj, function(key, value){
      if (value === "" || value === null){
          delete obj[key];
      } else if ($.isArray(value)) {
          if( value.length === 0 ){ delete obj[key]; return; }
          $.each(value, function (k,v) {
              removeNullsInObject(v);
          });
      } else if (typeof value === 'object') {
          if( Object.keys(value).length === 0 ){ 
              delete obj[key]; return; 
          }
          removeNullsInObject(value);
      }
  }); 
}

success: function(data) {
        if(data){
          removeNullsInObject(data);
          _this.account.reset(data);          
        } else {
          console.log("data error!");
        }
      }

something like that... for now... 👍

[Kanaye]

Hey @chardy. I added null to the valid parameters with #127 so you can remove your replacer function with the next release 😄