Nested Ajax calls

Nested Ajax calls

I have a list of users (returned as JSON) and I want to dynamically generate a profile for each user.  The user has a set of social media channels that differ for each user.  There are two templates that I am using one for the profile and the other for each social channel.  I am fine until I try to load the social channels.

$(function () {
if ($('#allMyPeeps').html() === '') {
var userData = 'allMyPeeps.json';
$.getJSON({ url: userData.myPeeps,
   format: "json" })
.done(function( peeps ) {
console.log(peeps);
$.each( peeps.users, function( index, peep ) {
var profile = 'profile_template.htm';
$.ajax({url: profile, success: function(result){
var myPeep = result.replace('{{name}}', peep.name).
replace('{{photo}}', peep.photo).
replace('{{role}}', peep.role);
/*  ---  Right here I need the same type of deal that I have for 
my peeps and put all the media channel links into the 
myPeep.('#socialNav')  ---  */
$.each( peep.soshLinks, function( i, sl ) {
var social = 'social_link.htm';
$.ajax( {url: social, success: function(soshResult){
// this determines the icon that will be used in the channel button (ommitted)
var soshIcon = getSoshIcon(sl.channel);
// build the social link
var soshLink = soshResult.replace('{{link}}', sl.link).
 replace('{{channel}}', sl.channel).
 replace('{{icon}}', soshIcon);
/* ???  I figure everything up till now is working but I get
tripped up on how to reference the social navigation 
in the profile template that I loaded and updated ??? */
// something like:
myPeep.getElementById('socialDiv').append(soshLink);
// only with working jquery 
}});
});
/*  only then, once the profile is built and the social links 
inserted, the whole thing goes into my profile list */
$("#allMyPeeps").append(myPeep);
}});
});
});
}
});

// allMyPeeps.json
{
"myPeeps": [
{
"name":"Joe Schmoe",
"role":"VIP",
"photo":"userImages/jschmoe.png",
"social":[{"type":"twitter", "link":"twitter.com/jschmoe"},
 {"type":"facebook", "link":"facebook.com/jschmoe"},
 {"type":"instagram", "link":"instagram.com/jschmoe"}]
},
{
"name":"Jane Schmoe",
"role":"admin",
"photo":"userImages/janeschmoe.png",
"social":[{"type":"twitter", "link":"twitter.com/janeschmoe"},
 {"type":"facebook", "link":"facebook.com/janeschmoe"},
 {"type":"instagram", "link":"instagram.com/janeschmoe"},
 {"type":"pintrest", "link":"pintrest.com/janeschmoe"}]
},
{
"name":"John Smith",
"role":"user",
"photo":"userImages/jsmith.png",
"social":[{"type":"twitter", "link":"twitter.com/jsmith"},
 {"type":"linkedin", "link":"linkedin.com/jsmith"},
 {"type":"youtube", "link":"youtube.com/jsmith"}]
},
{
"name":"Jane Doe",
"role":"admin",
"photo":"userImages/janeschmoe.png",
"social":[{"type":"twitter", "link":"twitter.com/janedoe"},
 {"type":"facebook", "link":"facebook.com/janedoe"},
 {"type":"instagram", "link":"instagram.com/janedoe"},
 {"type":"etsy", "link":"etsy.com/janedoe"}]
}
]
}

//  profile_template.htm
<div class="profile">
<img class="userPhoto" src="{{photo}}">
<div class="profile">
<h5>{{name}}</h5>
<h3>{{role}}</h3>         
</div>
<div class="socialDiv"></div>
</div>
//  social_link.htm
<div class="social">
<a href="{{link}}">
<img class="soshLink" src="{{icon}}" alt="{{type}}">
</a>
</div>