Why is JS not recognizing the json variable in nested json

I was working on setting dynamic profile cards for html in js and using an external json file and i keep running into a problem where the socials part of the js json script displays the values as undefined

<script>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>';
}
}</script>
THe problem 

code is below and is not getting the name value from the socials nested value in the profiles part of the json file

for(var a in profile){
social += profile[a].social_links;
if(typeof social.link_one.name && social.social_links.link_one.link != ""){

EDIT: Updated the code now just displays everything back to the underfined

There's too much to fix in your example code so instead of going over it line by line I'll just provide this alternative code suggestion.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// kicks off the profile fetching/rendering
makeCards();
// gets the data and invokes addCard for each profile
async function makeCards () {
const json = await getProfiles();
const container = document.getElementById('profiles');
Object.values(json.Profiles).forEach(profile => addCard(profile, container));
}
// makes an individual profile card and adds to parent
function addCard(profile, parent) {
// bail if we don't have a profile or a parent node
if (!profile || !parent) {
return;
}
// use a template literal instead of string concatenation for the html
parent.innerHTML += `
<div class="card">
${imgHtml(profile)}
<h1>${profile.name}</h1>
<p class="about-info">
${contactLinkHtml(profile)}
<ul class="social-list" id="social">
<li>
<a href="@" class="social-link><i class="fa facebook-square"></i></a>
</li>
</ul>
</p>
</div>
`
}
// use fallback image when image_name isn't present
function imgHtml ({image_name}) {
return `<img src="${image_name || '//placekitten.com/200'}" alt="avatar" class="profile-img" />`
}
// return html only when contact_link is present
function contactLinkHtml ({contact_link}) {
return !contact_link ? '' : `<a href="${contact_link}" class="btn">Contact</a>`
}

// ------ the rest is just hand-waving data stuff --------- //

// simulate the fetch request
async function getProfiles() {
return new Promise((resolve) => {
setTimeout(resolve(json(), 500));
})
}
// sample data
function json() {
return {
"Profiles": {
"profile 1": {
"name": "LoneOxi",
"Nick_name": "",
"image_name": "",
"imageBG_name": "",
"contact_link": "",
"description": "",
"role": "",
"social_links": {
"link_one": {
"name": "",
"link": ""
},
"link_two": {
"name": "",
"link": ""
},
"link_three": {
"name": "",
"link": ""
},
"link_four": {
"name": "",
"link": ""
},
"link_five": {
"name": "",
"link": ""
},
"link_six": {
"name": "",
"link": ""
},
"link_seven": {
"name": "",
"link": ""
}
}
},
"profile 2": {
"name": "Lonnie Gibson",
"Nick_name": "Quentin",
"image_name": "//placekitten.com/201",
"imageBG_name": "LonnieGBG.jpg",
"contact_link": "",
"description": "",
"role": "",
"social_links": {
"link_one": {
"name": "",
"link": ""
},
"link_two": {
"name": "",
"link": ""
},
"link_three": {
"name": "",
"link": ""
},
"link_four": {
"name": "",
"link": ""
},
"link_five": {
"name": "",
"link": ""
},
"link_six": {
"name": "",
"link": ""
},
"link_seven": {
"name": "",
"link": ""
}
}
}
}
}
}

<!-- language: lang-css -->

:root {
font-family: sans-serif;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#profiles {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
border-radius: 8px;
box-shadow: 4px 4px 8px #00000033;
width: 200px;
padding: .5rem;
}
.profile-img {
width: 100px;
aspect-ratio: 1;
border-radius: 4px;
}

<!-- language: lang-html -->

<div id="profiles"></div>

<!-- end snippet -->

Update:

I'd strongly recommend you use arrays for lists of items instead of naming each one, e.g. profile 1, profile 2.

Your list of profiles could look like this for example. (I've omitted some of the profile properties in the interest of brevity and readability.)

{
  "profiles": [
    {
      "name": "LoneOxi",
      "nickname": "",
      "imageUrl": "",
    },
    {
      "name": "Lonnie Gibson",
      "nickname": "Quentin",
      "imageUrl": "//placekitten.com/201"
    }
  ]
}

In addition to eliminating noise and complexity in the json, you can use the array iteration methods like map, forEach, for...of, etc. directly.

obj.Profiles.forEach(profile => console.log(profile.name))

Same for link_one, link_two. There's no point in naming them this way. I'd recommend you either use the name as the key:

{
  "social_links": {
    "facebook": "https://...",
    "twitter": "https://...",
    "instagram": "https://...."
  }
}

You could iterate these using a for...in loop, or via Object.entries:

for(const name in social_links) {
  const url = social_links[name];
  // do stuff with name and url
}

Object.entries(social_links).forEach(([name, url]) => {
  // do stuff with name and url
});

Or just use an array of the objects you're already using:

{
  "social_links": [
    {
      "name": "facebook",
      "link": "https://..."
    },
    {
      "name": "twitter",
      "link": "https://..."
    },
    {
      "name": "instagram",
      "link": "https://..."
    },
  ]
}

social_links.forEach(item => {
  // do stuff with item.name, item.link
})

I think it's a good idea to keep the root of the json response as an object to allow for additional metadata or whatever, but taken together your API response might look something more like this.

{
  metadata: {
    lastUpdated: '2023-04-04'
  },
  profiles: [
    {
      name: "Lonnie Gibson",
      image: "/path/to/avatar.jpg",
      bgImage: "/path/to/bgImage.jpg",
      social: [
        {
          name: 'facebook',
          url: 'https://facebook.com/...'
        },
        {
          name: 'twitter',
          url: 'https://twitter.com/...'
        }
      ]
    },
    {
      name: "Someone Else",
      image: "/path/to/avatar.jpg",
      bgImage: "/path/to/bgImage.jpg",
      social: [
        {
          name: 'facebook',
          url: 'https://facebook.com/...'
        },
        {
          name: 'twitter',
          url: 'https://twitter.com/...'
        }
      ]
    }
  ]
}