结构化和绑定（ajax 响应）答案

【问题标题】：Structuring and Binding (ajax response)结构化和绑定（ajax 响应）
【发布时间】：2016-08-03 12:47:06
【问题描述】：

我在多年的编码工作中遇到的一种常见模式是来自服务器响应 (XMLHttpRequest) 的数据的结构化/绑定。这个创建元素并以特定顺序附加它们以及绑定（属性、事件、内容）的问题是我在这里想要实现的。

出于示例目的和简单性，我正在尝试创建一个 tr --- td 嵌套结构以及绑定来自 var instructs 对象（表行、表数据）的属性。

JSON 响应（虚拟数据）

var response =[{"employeeNumber":"1002","lastName":"Murphy","firstName":"Diane","extension":"x5800","email":"dmurphy@classicmodelcars.com","officeCode":"1","reportsTo":null,"jobTitle":"President"},{"employeeNumber":"1056","lastName":"Patterson","firstName":"Mary","extension":"x4611","email":"mpatterso@classicmodelcars.com","officeCode":"1","reportsTo":"1002","jobTitle":"VP Sales"},{"employeeNumber":"1076","lastName":"Firrelli","firstName":"Jeff","extension":"x9273","email":"jfirrelli@classicmodelcars.com","officeCode":"1","reportsTo":"1002","jobTitle":"VP Marketing"},{"employeeNumber":"1088","lastName":"Patterson","firstName":"William","extension":"x4871","email":"wpatterson@classicmodelcars.com","officeCode":"6","reportsTo":"1056","jobTitle":"Sales Manager (APAC)"},{"employeeNumber":"1102","lastName":"Bondur","firstName":"Gerard","extension":"x5408","email":"gbondur@classicmodelcars.com","officeCode":"4","reportsTo":"1056","jobTitle":"Sale Manager (EMEA)"},{"employeeNumber":"1143","lastName":"Bow","firstName":"Anthony","extension":"x5428","email":"abow@classicmodelcars.com","officeCode":"1","reportsTo":"1056","jobTitle":"Sales Manager (NA)"},{"employeeNumber":"1165","lastName":"Jennings","firstName":"Leslie","extension":"x3291","email":"ljennings@classicmodelcars.com","officeCode":"1","reportsTo":"1143","jobTitle":"Sales Rep"},{"employeeNumber":"1166","lastName":"Thompson","firstName":"Leslie","extension":"x4065","email":"lthompson@classicmodelcars.com","officeCode":"1","reportsTo":"1143","jobTitle":"Sales Rep"},{"employeeNumber":"1188","lastName":"Firrelli","firstName":"Julie","extension":"x2173","email":"jfirrelli@classicmodelcars.com","officeCode":"2","reportsTo":"1143","jobTitle":"Sales Rep"},{"employeeNumber":"1216","lastName":"Patterson","firstName":"Steve","extension":"x4334","email":"spatterson@classicmodelcars.com","officeCode":"2","reportsTo":"1143","jobTitle":"Sales Rep"},{"employeeNumber":"1286","lastName":"Tseng","firstName":"Foon Yue","extension":"x2248","email":"ftseng@classicmodelcars.com","officeCode":"3","reportsTo":"1143","jobTitle":"Sales Rep"},{"employeeNumber":"1323","lastName":"Vanauf","firstName":"George","extension":"x4102","email":"gvanauf@classicmodelcars.com","officeCode":"3","reportsTo":"1143","jobTitle":"Sales Rep"},{"employeeNumber":"1337","lastName":"Bondur","firstName":"Loui","extension":"x6493","email":"lbondur@classicmodelcars.com","officeCode":"4","reportsTo":"1102","jobTitle":"Sales Rep"},{"employeeNumber":"1370","lastName":"Hernandez","firstName":"Gerard","extension":"x2028","email":"ghernande@classicmodelcars.com","officeCode":"4","reportsTo":"1102","jobTitle":"Sales Rep"},{"employeeNumber":"1401","lastName":"Castillo","firstName":"Pamela","extension":"x2759","email":"pcastillo@classicmodelcars.com","officeCode":"4","reportsTo":"1102","jobTitle":"Sales Rep"},{"employeeNumber":"1501","lastName":"Bott","firstName":"Larry","extension":"x2311","email":"lbott@classicmodelcars.com","officeCode":"7","reportsTo":"1102","jobTitle":"Sales Rep"},{"employeeNumber":"1504","lastName":"Jones","firstName":"Barry","extension":"x102","email":"bjones@classicmodelcars.com","officeCode":"7","reportsTo":"1102","jobTitle":"Sales Rep"},{"employeeNumber":"1611","lastName":"Fixter","firstName":"Andy","extension":"x101","email":"afixter@classicmodelcars.com","officeCode":"6","reportsTo":"1088","jobTitle":"Sales Rep"},{"employeeNumber":"1612","lastName":"Marsh","firstName":"Peter","extension":"x102","email":"pmarsh@classicmodelcars.com","officeCode":"6","reportsTo":"1088","jobTitle":"Sales Rep"},{"employeeNumber":"1619","lastName":"King","firstName":"Tom","extension":"x103","email":"tking@classicmodelcars.com","officeCode":"6","reportsTo":"1088","jobTitle":"Sales Rep"},{"employeeNumber":"1621","lastName":"Nishi","firstName":"Mami","extension":"x101","email":"mnishi@classicmodelcars.com","officeCode":"5","reportsTo":"1056","jobTitle":"Sales Rep"},{"employeeNumber":"1625","lastName":"Kato","firstName":"Yoshimi","extension":"x102","email":"ykato@classicmodelcars.com","officeCode":"5","reportsTo":"1621","jobTitle":"Sales Rep"},{"employeeNumber":"1702","lastName":"Gerard","firstName":"Martin","extension":"x2312","email":"mgerard@classicmodelcars.com","officeCode":"4","reportsTo":"1102","jobTitle":"Sales Rep"}];

绑定（指令）

var instructs={
    tag:"tr",
    attributes:{class:"table-row"},
    props:{
        email:{
            tag:"td",
            content: null,
            attributes:{class:"table-data",id:"table-data-id"}
        },
        employeeNumber:{
            tag:"td",
            attributes:{class:"table-data"},
            content: null,
            props:{
                x:{
                    tag: "input",
                    attributes:{class:"table-input"},
                    content: "test"
                }
            }
        },
        extension:{
            tag:"td",
            content: null,
            attributes:{class:"table-data"}
        },
        firstName:{
            tag:"td",
            content: null,
            attributes:{class:"table-data"}
        },
        jobTitle:{
            tag:"td",
            content: null,
            attributes:{class:"table-data"}
        },
        lastName:{
            tag:"td",
            content: null,
            attributes:{class:"table-data"}
        },
        officeCode:{
            tag:"td",
            content: null,
            attributes:{class:"table-data"}
        },
        reportsTo:{
            tag:"td",
            content: null,
            attributes:{class:"table-data"}
        }
    }
};

我的函数（组装）

function assemble(r,s,n){
    var n = n || new DocumentFragment();    
    if(typeof r !== 'string'){ //HAS CHILDREN
        r.forEach((o)=>{ 
            for(y in s){
                switch(y){
                    case "tag":
                        var tag = document.createElement(s[y]);
                        n.appendChild(tag);
                        break;
                    case "attributes":
                        for(a in s[y]) tag.setAttribute(a,s[y][a]);
                        break;
                    case "content":
                        if(s.content === null){
                            //append current property value
                        }
                        else{
                            tag.innerHTML = s.content;
                        }
                        break;
                    case "props":
                        for(k in o) assemble(k,s[y][k],tag); //EXECUTE PER CHILDREN
                        break;
                }
            }
        });
    }
    else{
        for(x in s){
            switch(x){
                case "tag":
                    var tag = document.createElement(s[x]);
                    n.appendChild(tag);
                    break;
                case "content":
                    if(s.content === null){
                        //append current property value
                    }
                    else{
                        tag.innerHTML = s.content;
                    }
                    break;
                case "attributes":
                    for(a in s[x]) tag.setAttribute(a,s[x][a]);
                    break;
                case "props":
                    for(c in s[x]) assemble(r,s[x][c],tag);
                    break;
            }
        }   
        return n;
    }
    return n;
}               

document.addEventListener('DOMContentLoaded',()=>{
     var data = assemble(response,instructs);           
     console.log(data);
});

我正在寻找的最终结果是嵌套 tr>td 的数组/片段，它们都具有类属性，并且值附加到 innerHTML。

<tr class ="table-row">
    <td class="table-data">how do I bind the response values?</td>
    <td class="table-data">how do I bind the response values?</td>
    <td class="table-data">how do I bind the response values?</td>
    <td class="table-data">how do I bind the response values?</td>
    <td class="table-data">how do I bind the response values?</td>
    <td class="table-data">how do I bind the response values?</td>
    <td class="table-data">how do I bind the response values?</td>
</tr>

问题：

如何将响应中的属性值绑定到td 的innerHTML？

【问题讨论】：

这个问题是不是太笼统了？尝试自己实现，如果遇到任何具体问题，请来这里提问。
@Gothdo - 我不同意。 OP 给出了具体的示例数据、他想要实现的目标的解释以及他迄今为止尝试实现的代码。
@Gothdo 我不认为它太宽泛了，我在尝试将指令/属性映射/绑定到正确的元素时被困在循环响应中。
@JordanDavis - 如果它们是真实的，我建议您删除（或更改）您数据中的那些电子邮件地址和员工 ID。如果它们是真实的，那么它就是垃圾邮件发送者或黑客喜欢的类型。
@devlincarnate 哦，不是它的虚假虚拟数据，不过感谢您的关注。

标签： javascript json data-binding binding traversal

【解决方案1】：

虽然我的回答没有解决问题中的代码上下文，但对于结构化和绑定 json 响应，我通常使用正则表达式模板。我发现它的声明简单而简洁。例如，

html:

<table>
  <tbody id="employee">
  </tbody>
</table>

js:

var template = function(tpl, data) {
  return tpl.replace(/\$\{([^\}]+)?\}/g, function($1, $2) {
    return data[$2];
  });
};

var rowTemplate = '<tr class ="table-row">\
                     <td class="table-data">${email}</td>\
                     <td class="table-data"><input type="text" value=' ${employeeNumber}' /></td>\
                     <td class="table-data">${firstName}</td>\
                     <td class="table-data">${lastName}</td>\
                     <td class="table-data">${email}</td>\
                     <td class="table-data">${jobTitle}</td>\
                     <td class="table-data">${extension}</td>\
                   </tr>';

var response = [{"employeeNumber":"1002","lastName":"Murphy","firstName":"Diane","extension":"x5800","email":"dmurphy@classicmodelcars.com","officeCode":"1","reportsTo":null,"jobTitle":"President"}, ....]

var b = document.getElementById('employee');

for (var i = 0; i < response.length; i++) {
  var tr = document.createElement('x');
  b.appendChild(tr);
  tr.outerHTML = template(rowTemplate, response[i]);
}

fiddle

希望这会有所帮助。

【讨论】：

有趣，我真的很喜欢你在这里的概念，但实际上并没有一种很好的方法来附加我所看到的事件侦听器，是吗？我看到的唯一方法是在 html 元素本身上声明它们内联？
是的，我明白你的意思。事件可以内联或在代码中创建 tr 节点后立即绑定。
是的，我正试图摆脱代码中的过程绑定，因此我可以简单地调用 assemble 将响应和指令作为参数传递。我很喜欢你的概念，从来没有想过这样做，谢谢你的意见！

【解决方案2】：

试试下面的。对不起，我开始重构你的，最后我重写了它。请注意 content 始终被视为 innerHTML，区分文本（附加 createTextNode func 结果）和 html（innerHTML 属性）并不是一个坏主意。在您的数据中，instructs.props.employeeNumber.props.x.content 应该移动到 instructs.props.employeeNumber.props.x.attributes.value 中，看看 input[text] 标签是如何工作的。顺便说一句，我看到有很多东西可以在这里讨论。希望对您有所帮助！

function assemble (data, instr) {
    var n = document.createDocumentFragment(), i;
    function create(d) {
        var objData = d;
        return (function _(_instr, _key, _n) {
            var innerHTML = !!_key && _key in objData ? objData[_key] : null,
                tag = null, i;
            if ('tag' in _instr) {
                tag = document.createElement(_instr.tag);
                tag.innerHTML = 'content' in _instr && !!_instr.content ? _instr.content : innerHTML;

                if ('attributes' in _instr) {
                    for (i in _instr.attributes) tag.setAttribute(i, _instr.attributes[i]);
                }
                //recur finally
                if ('props' in _instr) {
                    for (i in _instr.props) _(_instr.props[i], i, tag);
                }
                !!_n && _n.appendChild(tag);
            }
            return tag;
        })(instr, null);

    }
    return (function (){
        for (i in data) {
            n.appendChild(create(data[i]));
        }
        return n;
    })();
}

【讨论】：

你继续杀吧！！！该死的，这正是我要找的！你不真实。是的，我可能有几个问题，但首先我真的需要自己解决。
距离赏金还剩 10 小时。
需要你的帮助，稍作修改，就可以上赏金 --> stackoverflow.com/questions/37799485/…
嗨@JordanDavis .. 我快速浏览了一下，好像您刚刚更改了response 和instructions 结构......对吗？我会尽快看看
是的，基本上只是改变了命名空间，props -- 现在是 -- children 就像你说的 response 和 instructions 其他一切基本相同，我只是简写了你的功能更多。太棒了，谢谢你！