jQuery Read Nested JSON

Multidimensional Array Loop through object

by Suryar Praveen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div id="listing" class="container"></div>

JavaScript

var displayHTML = '';
var data = {
"actions" : [
    {
        "action": "TOP1",
        "subaction": [
            {
                "name": "A" 
            },
            {
                "name": "B" 
            },
            {
                "name": "C" 
            } 
        ] 
    },
    {
        "action": "TOP2",
        "subaction": [
            {
                "name": "X" 
            },
            {
                "name": "Y" 
            } 
        ]
    }]
};

$(document).ready(function() {
	$.each(data.actions, function(i, elementText) { 
	displayHTML += '<div class="list-group"><h2>' +elementText.action+ '</h2></div>';

  $.each(elementText.subaction, function(j, elementSubText) { 
  displayHTML += '<li class="list-group-item"><spam>' +elementSubText.name+'</span></li>';
  });
});
$("#listing").append(displayHTML);
});