jquery reading nested json

It looks like you want to loop though the .actions, so change this:

$.each(data, function(entryIndex, entry) {
  var html = '<li class="top-level">';
});

To this:

$.each(data.actions, function(entryIndex, entry) {
  var html = '<li class="top-level">' + this.action + '</li>';
});

Using data.actions you're now looping through that array of objects, and those objects are the ones with the .action property, for example: "TOP1" and "TOP2".

After 10 years i'm answering this equation. Using multidimensional array of objects, the inner value can be retrieved.

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

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

Here is the fiddle link : https://jsfiddle.net/ssuryar/h9vxeuzn/ - JSFIDDLE