Question

需要一些帮助。我已经暂时搁浅了一段代码，但我无法绕过它。慢慢地尝试学习JavaScript，并尝试处理一段JSON数据。

JSON数据如下。（简单的例子，在某些时候会发生更多的嵌套）

{
    "div": {
        "attr-id": "josh",
        "div": {
            "attr-id": "greg"
        }
    }
}

（到目前为止很好，对吧？）好吧，现在我试图把它变成HTML。首先我做了一些for循环，我尝试使用＆＃34;类＆＃34;，嵌套函数等等。所以我认为递归函数是合适的。哦，是的，让我说对了！ 头部爆炸

我一直在尝试各种功能，试图找到尽可能精益求精的东西。理论是：

将已解析的JSON发送给函数。函数找到第一个属性。如果属性值是对象，则获取属性键以用作document.createElement(v)的值。否则，如果属性值是一个字符串，那意味着有一个＆＃34; attr＆＃34;当下。我们需要将它应用于我们的元素。但是，如果元素还没有呢？我脑子开始加速摆动的时候了。无论如何，如果键值是一个对象，我们想再次调用该函数，这次提供这些数据。而且，因为我们正在处理元素。我们希望将此结果附加到我们之前的元素中。诶..

我已经丢弃了这么多代码，而且我很难绕过递归，或简单的javascript规则。我还没有比这更进一步，我害怕这个代码甚至不起作用。

function recurseYou(obj) {
    for(var key in obj) {
        //probably a safer way testing than typeof = string
        //but this'll have to do for now
            if(typeof obj[key] != 'string'){
                //create a new element
                var el = document.createElement((key.split("."))[0]);
                //append the return of the function using the 
                //current key value
                el.appendChild(recurseYou(obj[key]));
            } else {
                // do stuff to string
            }
        }
    return el;
}

无论如何，任何指针，提示或帮助非常感谢。但是请保持它只适用于JavaScript，我现在对使用库的解决方案不感兴趣！

Answer 1

而不是返回一个元素（因为当你可能被提供一个元素列表时，你不会有单个元素返回），而是传入一个元素（例如{{1 }}并附加到：

＆＃13;

document.body

＆＃13;

var o = {
    "div": {
        "attr-id": "josh",
        "text": "josh text",
        "div": {
          "attr-id": "greg",
          "text": "greg text"
        }
    }
};

function recurseYou(obj, parent) {
  for(var key in obj) {
    if (typeof obj[key] === 'object'){
      var tag = (key.split("."))[0];
      var el = document.createElement(tag);
      parent.appendChild(el);
      recurseYou(obj[key], el);
    } else if (key === "text") {
      var txt = document.createTextNode(obj[key]);
      parent.appendChild(txt);
    } else if (key.match(/^attr-/)) {
      var matches = key.match(/^attr-(.+)/);
      var vari = matches[1];
      var value = obj[key];
                
      parent.setAttribute(vari, value);
    }
  }
}

recurseYou(o, document.body);

＆＃13;

从JSON数据输出元素的递归函数

1 个答案: