how to display javascript json object?

Question

In Javascript code:

I used this code for display per row of Teams data:

var teamlist = {
  "teams0": {
    "name": "Jhon",
    "training": "CEO"
  },
  "teams1": {
    "name": "Alex",
    "training": "Worker"
  }
};

var html = "";
var obj = JSON.parse(teamlist);
for (var i = 0; i < obj.teams.length; i++) {
  html += "<p>" + obj.teams[i].name + "</p>";
}
//jQuery("#searchresults").html(html);

In output:

Uncaught TypeError: obj.teams is undefined

How can I display a JSON object in JavaScript with a for loop?

Update this mysql table:

and in model:

public function getMapSearchResults($mapbounds)
{
    try 
    {
        $db    = Factory::getDbo();
        $query = $db->getQuery(true);
        $query->select('h.name, h.latitude, h.longititude, h.country, h.teams')
           ->from('#__therapist_centers as h')
           ->where('h.latitude > ' . $mapbounds['minlat'] . 
            ' AND h.latitude < ' . $mapbounds['maxlat'] .
            ' AND h.longititude > ' . $mapbounds['minlng'] .
            ' AND h.longititude < ' . $mapbounds['maxlng']);
        $db->setQuery($query);
        $results = $db->loadObjectList(); 
        
    }
    catch (Exception $e)
    {
        $msg = $e->getMessage();
        Factory::getApplication()->enqueueMessage($msg, 'error'); 
        $results = null;
    }

    return $results; 
}

and in view php file:

function displaySearchResults(result) {
        if (result.success) {
            var html = "";
            
            for (var i=0; i<result.data.length; i++) {
    
                html += "<p>" + result.data[i].name + "</p>"; //worked and display value as well

               html=html+result.data[i].teams;  // dispay ==> {"teams0":{"name":"Jhon","training":"ceo","agenda":""},"teams1":{"name":"Alex","training":"worker","agenda":""}}

               // i want display each teams [name,training] row

             // comment by @Ben-Steinbrunner

              var teamlist = result.data[i].teams;
              for (var key in teamlist) {
              html=html+ '<p>' + teamlist[key].name + '</p>'; // output ==> undefined
           
               }
            }
            jQuery("#searchresults").html(html);  
        } else {
            var msg = result.message;
            if ((result.messages) && (result.messages.error)) {
                for (var j=0; j<result.messages.error.length; j++) {
                    msg += "<br/>" + result.messages.error[j];
                }
            }
            jQuery("#searchresults").html(msg);
        }
    }

Answer 1

If you can't change the external data you can loop over the data with for-in .

// emulated data from Database
var result = {};
result.success = true;
result.data = {
        "teams0": {
        "name": "John",
        "training": "CEO"
    },
        "teams1": {
        "name": "Alex",
        "training": "Worker"
    }
};

function displaySearchResults(result) {
    if (result.success) {
        var html = "",
            teamlist = result.data;
            
        for (var key in teamlist) {
            html += '<p>' + teamlist[key].name + '</p>';
        }
        
        jQuery("#searchresults").html(html);  
    } else {
        var msg = result.message;
        
        if ((result.messages) && (result.messages.error)) {
            for (var j=0; j<result.messages.error.length; j++) {
                msg += "<br/>" + result.messages.error[j];
            }
        }
        
        jQuery("#searchresults").html(msg);
    }
}