Question

我正在尝试解析JSON并构建一个HTML字符串以附加到DOM，但无论我做什么，字符串只返回JSON中的第一个元素。

这是js：

var menu_json = {
    "name": "Personal Banking",
    "url": "/test1.html",
    "children": [
      {
        "id": "1",
        "name": "test2",
        "url": "/products/deposits/test2.html",
        "children": [
          {
            "id": "1",
            "name": "test3",
            "url": "/products/deposits/test3.html",
            "children": [
              {
                "id": "1",
                "name": "test5",
                "url": "test5"
              },
              {
                "id": "2",
                "name": "test6",
                "url": "/products/deposits/test6.html"
              },
              {
                "id": "3",
                "name": "test7",
                "url": "/products/deposits/test7.html"

              },
              {
                "id": "4",
                "name": "test8",
                "url": "/products/deposits/test8.html"
              },
              {
                "id": "5",
                "name": "test9",
                "url": "/products/deposits/test9.html"
              },
              {
                "id": "6",
                "name": "test10",
                "url": "/products/deposits/test10.html"
              },
              {
                "id": "7",
                "name": "test11",
                "url": "/products/deposits/test11.html"
              }
            ]
          }
        ]
      }
    ]
}

var test_html = "<ul>",
buildNavHelper = function(curNode){
    test_html += "<li>" + curNode.name;
    if (curNode.hasOwnProperty('children')){
       test_html += "<ul>" + _.map(curNode.children, buildNavHelper) + "</ul>";
    }
    test_html += "</li>";   
};

buildNavHelper(menu_json);
test_html += "</ul>";

$('#thing').append(test_html);

这是一个小提琴 https://jsfiddle.net/w734bvw7/

Answer 1

buildNavHelper()没有退货声明，因此_.map()没有任何回复。外部test_html不在范围内。试试这个：

buildNavHelper = function(curNode){
    var test_html = "<li>" + curNode.name;
    if (curNode.hasOwnProperty('children')){
       test_html += "<ul>" + _.map(curNode.children, buildNavHelper).join("") + "</ul>";
    }
    test_html += "</li>";  
    return test_html;
};

test_html = "<ul>" + buildNavHelper(menu_json) + "</ul>";

请注意添加.join()以避免在输出中使用逗号。

此外，这里不需要使用下划线; Array.map()是原生Javascript。

buildNavHelper = function(curNode){
    var test_html = "<li>" + curNode.name;
    if (curNode.hasOwnProperty('children')){
       test_html += "<ul>" + curNode.children.map(buildNavHelper).join("") + "</ul>";
    }
    test_html += "</li>";  
    return test_html;
};

Answer 2

https://jsfiddle.net/w734bvw7/3/

buildNavHelper = function(curNode){
    var test_html = "<ul>";
    test_html += "<li>" + curNode.name;
    if (curNode.hasOwnProperty('children')){
        test_html += "<ul>" + _.map(curNode.children, buildNavHelper) + "</ul>";
    }
    test_html += "</li>";   
    test_html += "</ul>";
    return test_html;    
};

$('#thing').append(buildNavHelper(menu_json));

Answer 3

使用HTML字符串构建列表可以生成HTML注入。我推荐使用DOM方法：

function buildNavHelper(arr) {
  var ul = document.createElement('ul');
  for(var i=0; i<arr.length; ++i) {
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(arr[i].name));
    if(arr[i].children)
      li.appendChild(buildNavHelper(arr[i].children));
    ul.appendChild(li);
  }
  return ul;
}

＆＃13;

var menu_json = {
  "name": "Personal Banking",
  "url": "/test1.html",
  "children": [
    {
      "id": "1",
      "name": "test2",
      "url": "/products/deposits/test2.html",
      "children": [
        {
          "id": "1",
          "name": "test3",
          "url": "/products/deposits/test3.html",
          "children": [
            {
              "id": "1",
              "name": "test5",
              "url": "test5"
            },
            {
              "id": "2",
              "name": "test6",
              "url": "/products/deposits/test6.html"
            },
            {
              "id": "3",
              "name": "test7",
              "url": "/products/deposits/test7.html"

            },
            {
              "id": "4",
              "name": "test8",
              "url": "/products/deposits/test8.html"
            },
            {
              "id": "5",
              "name": "test9",
              "url": "/products/deposits/test9.html"
            },
            {
              "id": "6",
              "name": "test10",
              "url": "/products/deposits/test10.html"
            },
            {
              "id": "7",
              "name": "test11",
              "url": "/products/deposits/test11.html"
            }
          ]
        }
      ]
    }
  ]
}

function buildNavHelper(arr) {
  var ul = document.createElement('ul');
  for(var i=0; i<arr.length; ++i) {
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(arr[i].name));
    if(arr[i].children)
      li.appendChild(buildNavHelper(arr[i].children));
    ul.appendChild(li);
  }
  return ul;
}
document.querySelector('#thing').appendChild(buildNavHelper([menu_json]));

＆＃13;

<div id="thing"></div>

＆＃13;

字符串未附加在函数中

3 个答案: