Question

我创建了一个将任意JSON数据遍历到UL / LI中的函数。现在我需要做相反的事情并将UL / LI转换回JSON对象。如果可能的话，我想在JQuery中这样做。那么如何将我的嵌套UL / LI转回其原始的JSON对象呢？

var traverseJson = function(jsonObj) {
  "use strict";
  var htmlOut = "",
    value,
    inputv,
    prop;
  for (prop in jsonObj) {
    if (jsonObj.hasOwnProperty(prop)) {
      value = jsonObj[prop];
      switch (typeof value){
        case "object":
          htmlOut += "<li><b>" + prop + "</b><span>" + traverseJson(value) + "</span></li>";
          break;
        default:
          inputv = "<span>" + value  + "</span>";
          htmlOut += "<li class='val'><b>" + prop + ":</b>" + inputv + "</li>";
          break;
      }
    }
  }
  return "<ul>" + htmlOut + "</ul>";
};

Answer 1

你要做的就是迭代li元素。

function parseList() {
    var outObj = {};

    $("li").each(function () {
        var propName = $(this).children("b").html();
        var propValue = $(this).children("span").html();
        outObj[propName] = propValue;
    });

    return outObj;
}

Answer 2

这样的事情应该有效。它需要一个表示div的jQuery对象，并在其中找到第一个ul标记并向下遍历，直到找到不包含li标记的ul标记。

var divToJson = function ($div) {
  "use strict";
  var traverseUl = function ($ul) {
    var  output = {},
      $li = $ul.children('li');
    $li.each(function () {
      var $this = $(this),
        propName = $this.children('b').text(),
        $propValue = $this.children('span'),
        $subList = $propValue.find('ul').first();

        if ($subList.length > 0) {
          output[propName] = traverseUl($subList);
        } else {
          output[propName] = $propValue.text();
        }
    });
    return output;
  };

  return traverseUl($div.find('ul').first());
}; 

var theDiv = $('#somediv');
console.log(divToJson(theDiv));

将HTML转换为JSON

2 个答案: