How to loop through JSON object with an array inside in Jquery/Javascript?

Question

I want to loop through an JSON object based on the amount of items in "nationality" that I retrieve with an AJAX call in JQuery. The problem is that there is an array inside my JSON object that I also need to loop through. At the moment I get undefined or can only print the company name.

JSON response I retrieve:

{"nationality":[{"country":"Spain","abbreviation":"es"},{"country":"Brazil","abbreviation":"br"}],"Company":"John Comp","errors":false,"meta":{"execution_time":"2.512342 seconds"}}

I want to print these in a table in the following way:

What I tried:

  $.ajax({
                type: 'GET',
                url: 'testurl',
                success: function (response) {
                  
                    var data = JSON.parse(response);

  
              // How can I check if response here is empty if it is an JSON String?
              if (response.length > 0) {
              $.each(response.nationality, function (i, item) {
               console.log(item.country);

               } 

Answer 1

You're parsing the response in your data variable but you're using the response variable in your loop instead of the data variable.

try {
    const json = JSON.parse(response);
    if(!json.nationality || !json.nationality.length === 0) throw new Error('Nationality is empty')

    json.nationality.forEach((item)=>{
        console.log(item)
        //do your stuff
    })
} catch (e) {
    console.error(e)
}