JS读取嵌套JSON中socials变量显示undefined问题求助

我用JavaScript给HTML做动态名片，通过外部JSON文件获取数据，一开始处理嵌套的socials部分时值一直返回undefined，更新代码后所有内容都变成undefined了。

完整代码 #

var profiles = {} 
window.onload = function () { 
    GetProfiles() 
}
function GetProfiles(){
    $.getJSON('https://gameremporium.us/image/Profile/profile.json', function(data) {

        var projson = data;
        for(var q in projson){
            jsonpro = projson[q];
            for(var i in jsonpro){
                profile = jsonpro[i];
                if (typeof profile["name"] != "" || typeof profile["name"] != undefined){
                    profiles["name"] += profile.name;
                }
                if (typeof profile["Nick_name"] != "" || typeof profile["Nick_name"] != undefined){
                    profiles["Nick"] += profile.Nick_name;
                    }
                if (typeof profile["role"] != "" || typeof profile["role"] != undefined){
                    profiles["role"] += profile.role;
                    }
                if (typeof profile["description"] != "" || typeof profile["description"] != undefined){
                    profiles["description"] += profile.description;
                    }
                if (typeof profile["image"] != "" || typeof profile["image"] != undefined){
                    profiles["image"] += profile.image_name;
                    }
                if (typeof profile["imageBG"] != "" || typeof profile["imageBG"] != undefined){
                    profiles["imageBG"] += profile.imageBG_name;
                    }
                if (typeof profile["contact"] != "" || typeof profile["contact"] != undefined){
                    profiles["contact"] += profile.contact_link;
                    }
                for(var a in profile){
                    social = profile[a].social_links;
                        for(var a in social){
                            media = social[a]
                    
                            if(media["link_one"].name && media["link_one"].link != ""){
                                profiles.social["link_one"]["name"] += media.name;
                                profiles.social["link_one"]["link"] += media.link;
                            }
                            if(media.name && media.link != ""){
                                profiles.social["link_two"]["name"]  += media.name
                                profiles.social["link_two"]["link"]  += media.link
                            }
                            if(media.name && media.link != ""){
                                profiles.social["link_three"]["name"]  += media.name
                                profiles.social["link_three"]["link"]  += media.link
                            }
                            if(media.name && media.link_four.link != ""){
                                profiles.social["link_four"]["name"]  += media.name
                                profiles.social["link_four"]["link"]  += media.link
                            }
                            if(media.name && media.link != ""){
                                profiles.social["link_five"]["name"]  += media.name
                                profiles.social["link_five"]["link"]  += media.link
                            }
                            if(media.name && media.link != ""){
                                profiles.social["link_six"]["name"] += media.name
                                profiles.social["link_six"]["link"] += media.link
                            }
                        }
                }
                SetProfiles(profiles); 
            }
        };
    })
    };

function SetProfiles(profiles){
    for(var i in profiles){
        profile = profiles[i];
        document.getElementById("profiles").innerHTML = '<div class="card"><img src="'+profile["imageBG"]+'" alt="background-image" class="bg-img"><img src='+profile["image"]+'" alt="avatar" class="profile-img"><h1>"'+profile["name"]+'"</h1><p class="about-info">"'+profile["description"]+'"</p><a href="'+profile["contact"]+'" class="btn">Contact</a><ul class="social-list" id="social"><li><a href="@" class="social-link"><i class="fa fa-facebook-square"></i></a></li></ul></div>';
    }
}

核心问题代码片段 #

for(var a in profile){
    social += profile[a].social_links;

    if(typeof social.link_one.name && social.social_links.link_one.link != ""){

问题修复方案 #

1. 初始化profiles结构，避免undefined拼接 #

profiles初始是空对象，直接用+=会把undefined和字符串拼接，导致最终值带undefined。先初始化所有需要的属性：

var profiles = {
    name: "",
    Nick: "",
    role: "",
    description: "",
    image: "",
    imageBG: "",
    contact: "",
    social: {
        link_one: {name: "", link: ""},
        link_two: {name: "", link: ""},
        link_three: {name: "", link: ""},
        link_four: {name: "", link: ""},
        link_five: {name: "", link: ""},
        link_six: {name: "", link: ""}
    }
};

2. 修正条件判断逻辑 #

原判断用||会导致条件永远为真（比如typeof profile["name"]返回"string"，永远不等于空字符串），换成简洁的存在性判断：

// 替换原name字段的判断
if (profile.name) {
    profiles.name += profile.name;
}
// 其他字段同理，比如Nick_name
if (profile.Nick_name) {
    profiles.Nick += profile.Nick_name;
}

3. 修复social_links遍历逻辑 #

原代码遍历profile的所有属性，会把name、description等非对象属性也拿来取social_links，直接报错。应该直接访问profile.social_links：

// 替换原social部分的遍历代码
if (profile.social_links) {
    for (var linkKey in profile.social_links) {
        var media = profile.social_links[linkKey];
        // 只处理已定义的social项
        if (profiles.social[linkKey]) {
            if (media.name && media.link) {
                profiles.social[linkKey].name += media.name;
                profiles.social[linkKey].link += media.link;
            }
        }
    }
}

4. 修正SetProfiles函数的遍历错误 #

原函数遍历profiles的属性（name、Nick等），但profiles是单个用户的聚合对象，直接使用即可，同时修复字符串拼接的语法错误：

function SetProfiles(profiles){
    let socialHtml = '';
    // 动态生成所有有效社交链接
    for (let key in profiles.social) {
        let item = profiles.social[key];
        if (item.link) {
            socialHtml += `<li><a href="${item.link}" class="social-link">${item.name}</a></li>`;
        }
    }

    document.getElementById("profiles").innerHTML = `
        <div class="card">
            <img src="${profiles.imageBG}" alt="background-image" class="bg-img">
            <img src="${profiles.image}" alt="avatar" class="profile-img">
            <h1>${profiles.name}</h1>
            <p class="about-info">${profiles.description}</p>
            <a href="${profiles.contact}" class="btn">Contact</a>
            <ul class="social-list" id="social">${socialHtml}</ul>
        </div>
    `;
}

5. 注意JSON结构匹配 #

确保外部JSON的结构和代码预期一致，比如social_links应该是包含link_one、link_two等属性的对象，每个对象有name和link字段。

内容的提问来源于stack exchange，提问作者Lonster_Monster