Question

i have two JSON data of following structure
that i get from server using getJSON jquery.

countrylist = [
    { "Country": "United States", "Code": "us" }, 
    { "Country": "Belgium", "Code": "be" }, 
    { "Country": "Argentina", "Code": "ar" },
    .
    .
    .
]

citylist = [
    { "City": "Abernant", "ContryCode": "us", "CityId"=1 }, 
    { "City": "Academy Park", "ContryCode": "be", "CityId"=2}, 
    { "City": "Abernathy", "ContryCode": "ar","CityId"=3 },
    .
    .
    .
]

I need to display City, Country in my div how do i lookup the countrCode from countrylist in Citylist Object and put its full Country.
So i can display

Abernant, United States
Academy Park, Belgium
Abernathy, Argentina

i have this code so far

  $.getJSON('../GetCountrylist', function (data) {
    var countryList =data;
  });


  $.getJSON('../GetCitylist', function (data) {
    //this is where i need to Join the data
    //for each data dispaydata= data.City ',' + Country
  });

Answer 1

You can transform countrylist using countrylist.Code as a property. Making getting the country a trivial task.

var countries = {};
$.each(countrylist, function(i, country){
  countries[ country.Code ] = country.Country;
});

Now, you can iterate over citylist and get the country from countries.

$.each(citylist, function(j, city){
  console.log(city.City + "," + countries[ city.ContryCode ]);
});

See it here.