动态 jQuery 对话框从循环内传递 JSON 对象

Question

我想知道是否有比我当前的实现更好（更干净？）的方法。我目前正在将 PHP SimpleXMLObject（USPS Tracking 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、最近事件和邮件 Class 的主循环 - 我目前正在生成附加到 [=16= 的内容 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

我认为你可以使用 angular 和数据绑定：

因此，您只需使用一个指令即可轻松地将服务器端的 JSON 对象自动绑定到 html 元素。

不过你应该开始学习了angular。

你可以在这里开始寻找你优雅的做事方式： https://docs.angularjs.org/tutorial/step_04

希望有用。

动态 jQuery 对话框从循环内传递 JSON 对象

Dynamic jQuery Dialog passing JSON object from within loop

javascript

jquery

dynamic