title: cities.statename.data generate error Cannot read property 'data' of undefined at Object.city
body: <blockquote>
    <p>Cannot read property 'data' of undefined at Object.city</p>
  </blockquote>
  
  <p>Problem is I am calling state with dynamically ,when I wrote cities.UP.data it display correct result and when I add cities.statename.data here state name generate dynamically when I select any states. </p>
  
  <p><code>person.details.getInfo.city($(this).val());
   city : function (statename)</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;script src="https:ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;script type="text/javascript"&gt;
        var states = ['UP','MP','MH','DL' ];
        var cities = {
                     "UP":{
                      data:['allahabad','kanpur','luckhnow']
                       },
                        "MP":{
                      data:['Bhopal','Jhansi','Gwalior']
                       }
                     };
        var area = [
                      alld = ['kr','kp','mu']
                  ];
          var person = {
          firstName : "John",
          lastName  : "Doe",
          age       : 50,
          eyeColor  : "blue",
          details :{ 
              getInfo :{
                state : function ()
                {
                  return document.getElementById("slectstate").innerHTML = printHtmlAttr.option(states);
                },
                 city : function (statename)
                {
                  statename = statename.trim();
                  console.log(statename);
                    return document.getElementById("slectstate2").innerHTML = printHtmlAttr.option(cities.statename.data); 
                },
                 area : function (city)
                {
  
                },
               }
          }
  
      }
      var printHtmlAttr={
          option : function(val)
          { 
              var options='&lt;option value=""&gt;choose&lt;/option&gt;';
             $.each(val,function(e,v){
              options = options+'&lt;option value="'+v+'"&gt;'+v+'&lt;/option&gt;';
             });
             return options;
          }
      }
      $(document).ready(function(){
        person.details.getInfo.state();
        $("body").on("change","#slectstate",function(){
          person.details.getInfo.city($(this).val());
        });
      });
        &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;select id="slectstate"&gt;&lt;/select&gt;
      &lt;select id="slectstate2"&gt;&lt;/select&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>