JavaScript 子对象不可访问

Question

我对 JavaScript 中的对象处理不熟悉，但遇到了一个问题。我希望你能帮助我。

要了解我在这里所做的事情:我有一个多层对象，每个国家/地区有两个不同的电话号码(短代码)。由于列表太长，我添加了“欧洲”类别。当我尝试访问子对象的数据时，我的引用始终未定义，但我的 console.log(l2) 表明子对象存在并且应该具有定义的属性。

你能帮我理解为什么属性未定义或者我做错了什么吗？

fiddle :https://jsfiddle.net/qsov54an/

JS:

langs = {
    "CRA": {flag: '',cs:'4262',as:''},
    "Reviews": {flag: '',cs:'72074301',as:''},
    "Europe": {
        "Bulgarian": {flag: 'bg',cs:'4668',as:''},
        "Croatian": {flag: 'hr',cs:'4671',as:'4707'},
        "Czech": {flag: 'cz',cs:'4365',as:'4553'},
        "Danish": {flag: 'dk',cs:'4357',as:'4526'},
        "Dutch": {flag: 'nl',cs:'4343',as:'4511'},
        "English": {flag: 'gb',cs:'4164',as:'4482'},
        "Finnish": {flag: 'fi',cs:'4092',as:''},
        "Flemish": {flag: 'be',cs:'4500',as:''},
        "French": {flag: 'fr',cs:'4344',as:'4781'},
        "German": {flag: 'de',cs:'4345',as:'4473'},
        "Hungarian": {flag: 'hu',cs:'4221',as:'4729'},
        "Italian": {flag: 'it',cs:'4348',as:'4485'},
        "Latvian": {flag: 'lv',cs:'4674',as:''},
        "Lithuanian": {flag: 'lt',cs:'4673',as:''},
        "Norwegian": {flag: 'no',cs:'4356',as:'4533'},
        "Polish": {flag: 'pl',cs:'4351',as:'4512'},
        "Spanish": {flag: 'es',cs:'4346',as:'4524'},
        "Swedish": {flag: 'se',cs:'4349',as:'4554'},
        "Portuguese (PT)": {flag: 'pt',cs:'4347',as:'4522'},
        "Romanian": {flag: 'ro',cs:'4675',as:''},
        "Turkish": {flag: 'tr',cs:'4355',as:'4530'},
    },
    "Cantonese": {flag: 'cn',cs:'',as:''},
    "Chinese": {flag: 'cn',cs:'4353',as:'4752'},
    "English": {flag: 'us',cs:'4164',as:'4482'},
    "Estonian": {flag: 'ee',cs:'4669',as:''},
    "Hebrew": {flag: 'il',cs:'4670',as:'4727'},
    "Icelanding": {flag: 'is',cs:'4672',as:''},
    "Indonesia": {flag: 'id',cs:'4368',as:'4713'},
    "Japanese": {flag: 'jp',cs:'4265',as:'4717'},
    "Korean": {flag: 'kp',cs:'4366',as:''},
    "Malay": {flag: 'ms',cs:'4367',as:''},
    "Portuguese (BR)": {flag: 'br',cs:'4552',as:'4781'},
    "Russian": {flag: 'ru',cs:'4350',as:'4559'},
    "Serbian": {flag: 'rs',cs:'4677',as:''},
    "Slovenian": {flag: 'si',cs:'4676',as:''},
    "Tagalog": {flag: '',cs:'4678',as:''},
    "Thai": {flag: 'th',cs:'4354',as:'4555'},
    "Vietnamese": {flag: 'vn',cs:'4679',as:''}
};


$.each( langs, function( key, l ) {
    //console.log('length L:',Object.keys(l).length,l);
    if(Object.keys(l).length > 3)
    {
            if(key == "Europe") flag = 'eu';
            else flag = '';
            html  = '<li class="dropdown-submenu">';
            html += '  <a href="#"><span class="flag flag-'+flag+'"></span> '+key+'</a>';
            html += '  <ul class="dropdown-menu">';

            $.each( l, function( key2, l2 ) {
                console.log(key2,l2);
                if(l2.cs.length < 8)
                    l2.cs = '7108' + l.cs;
                if(l2.as.length < 8 && l2.as.length > 0)
                    l.as = '7108' + l.as;
                if(l2.as !== '')
                {
                    html += '<li class="dropdown-submenu">';
                    html += '  <a href="tel:'+l.cs+'"><span class="flag flag-'+l2.flag+'"></span> '+key2+'</a>';
                    html += '  <ul class="dropdown-menu">';
                    html += '    <li><a href="tel:'+l2.cs+'">CS: '+l2.cs.substring(4,8)+'</a></li>';
                    html += '    <li><a href="tel:'+l2.as+'">AS: '+l2.as.substring(4,8)+'</a></li>';
                    html += '  </ul>';
                    html += '</li>';
                }
                else
                {
                    html += '<li data-lang="'+l2.flag+'">';
                    html += '  <a href="tel:'+l2.cs+'"><span class="flag flag-'+l2.flag+'"></span> '+key2+'</a>';
                    html += '</li>';
                }


            });

            $('#btb_lang_list').append(html);
    }
    else
    {
        if(l.cs.length < 8)
            l.cs = '7108' + l.cs;
        if(l.as.length < 8 && l.as.length > 0)
            l.as = '7108' + l.as;
        if(l.as !== '')
        {
            html  = '<li class="dropdown-submenu">';
            html += '  <a href="tel:'+l.cs+'"><span class="flag flag-'+l.flag+'"></span> '+key+'</a>';
            html += '  <ul class="dropdown-menu">';
            html += '    <li><a href="tel:'+l.cs+'">CS: '+l.cs.substring(4,8)+'</a></li>';
            html += '    <li><a href="tel:'+l.as+'">AS: '+l.as.substring(4,8)+'</a></li>';
            html += '  </ul>';
            html += '</li>';
        }
        else
        {
            html  = '<li data-lang="'+l.flag+'">';
            html += '  <a href="tel:'+l.cs+'"><span class="flag flag-'+l.flag+'"></span> '+key+'</a>';
            html += '</li>';
        }

        $('#btb_lang_list').append(html);
    }
});

Answer 1

我认为你的第二个循环正在尝试访问它没有的变量:

$.each( l, function( key2, l2 ) {

其中，您尝试在 function( key2, l2 ) 中引用 l.cs，但该函数不知道 l 是什么code> 是，因此它返回一个空的本地对象(以及 l.cs 的 undefined)

我不确定，但这是我看到它后的第一个猜测。