Dynamic jQuery Dialog passing JSON object from within loop

Question

I'm wondering if there is a better (cleaner?) method than my current implementation. I'm currently encoding a PHP SimpleXMLObject (USPS Tracking API) to JSON and looping through said JSON object via Javascript to operate the front-end.

Examples from my current implementation below:

Function to display dialog implemented anonymously outside of .ready() :

var moreInfo_popup = function(i) {
$('#moreinfo'+i).dialog({
        modal:false,
        autoOpen:false,
        height:555,
        title: 'Detailed View',
        width:500,
        draggable:false,
        buttons: {
            Ok: function(){
                $(this).dialog("close");
        }
    }
    });

        $('#moreinfo'+i).dialog('open');

        }

Main loop for displaying Tracking ID, Most Recent Event, and Mail Class for each API response- I'm currently generating a content div appended to #modal_container , then calling moreInfo_popup() inline via <input onClick=""> :

for(var key in obj) {
                    if(obj.hasOwnProperty(key)) {
                    if(key % 2 === 0) {
                    $('#page-nav').append("<div id=\"results_table\"><table class=\"data_table\"id=\"data_table_id\"border=\"0\"width=\"60%\"align=\"center\"><tr><td align=center width=20%>"+obj[key].TrackInfo.Attributes.ID+"</td><td align=\"center\"width=\"35%\">"+obj[key].TrackInfo.StatusSummary+"</td><td align=\"center\"width=\"20%\">"+obj[key].TrackInfo.Class+"</td><td align=\"center\"><input type=\"button\"class=\"moreInfo\"value=\"Detail\"id=\"_buttonMoreInfo\"onClick=\"moreInfo_popup("+key+")\"></td></tr></table></div>");

                    $('#modal_container').append("<div id=\"moreinfo" + key + "\"><table><tr><td>" + obj[key].TrackInfo.Attributes.ID +"</td></tr></table>").hide();
                  }
                else {
                  $('#page-nav').append("<div id=\"results_table\"><table class=\"data_table_even\" id=\"data_table_id\" border=0 width=60% align=center><tr><td align=center width=20%>" 
                                      + obj[key].TrackInfo.Attributes.ID + "</td><td align=center width=35%>" + obj[key].TrackInfo.StatusSummary + "</td><td align=center width=20%>" 
                                      + obj[key].TrackInfo.Class + "</td><td align=\"center\"><input type=\"button\" value=\"Detail\" class=\"moreInfo\" id=\"_buttonMoreInfo\"onClick=\"moreInfo_popup("+key+")\"></td></tr></table></div>");

                  $('#modal_container').append("<div id=\"moreinfo" + key + "\"><table><tr><td>" + obj[key].TrackInfo.Attributes.ID +"</td></tr><tr><td> <button>OK</button></td></tr></table>");


                }

            }

      $("#page-nav td:contains('undefined')").html("Invalid");    
  }

As I'm sure you can see, this feels like an incredibly tedious way of accomplishing the desired outcome, to which there is surely a better alternative. As a newcomer to JavaScript/jQuery, I've done plenty of searching on this subject, but haven't really understood much of what I found- If indeed I was asking the right questions in the first place.

Answer 1

I think you can use angular and data bind:

So you can just use a directive and automatically bind your JSON object from the server side easily to the html elements.

However you should start studying angular.

you can start looking for your elegant way of doing stuffs here: https://docs.angularjs.org/tutorial/step_04

I hope it was useful.