動態jQuery對話框從循環中傳遞JSON對象

Question

我想知道是否有比當前實現更好的方法（更清潔？）。 我目前正在將PHP SimpleXMLObject （USPS跟蹤API）編碼為JSON，並通過Javascript遍歷所述JSON對象以操作前端。

下面是我當前的實現示例：

顯示在.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');

        }

顯示每個API響應的跟蹤ID，最新事件和郵件類的主循環-我當前正在生成附加到#modal_container的內容div，然后通過<input onClick="">內聯調用moreInfo_popup() ：

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");    
  }

正如您確定的那樣，這確實是一種令人難以置信的單調乏味的方法，可以實現預期的結果，當然還有更好的選擇。 作為JavaScript / jQuery的新手，我已經在這個主題上進行了大量的搜索，但是並沒有真正理解我所發現的東西-如果確實我是在問正確的問題。

Answer 1

我認為您可以使用角度和數據綁定：

因此，您只需使用一條指令，即可將服務器端的JSON對象自動輕松地綁定到html元素。

但是，您應該開始研究角度。

您可以在這里開始尋找做事的優雅方式： https : //docs.angularjs.org/tutorial/step_04

我希望它是有用的。