使用jquery将缩进的字符串解析为层次结构

时间:2012-03-11 20:15:54

标签: jquery json parsing

我有这个丑陋的选择列表,带有缩进(“ - ”)来说明层次结构。我想使用jquery从源到结果获取数据。

来源

<option value="12">Subcontractor</option>
<option value="108">-Surveyor</option>
<option value="62">--Excavation works</option>
<option value="554">--Concrete works</option>
<option value="44">-Demolition works</option>
<option value="103">--Site preparation works</option>
<option value="67">--Excavation works</option>
<option value="40">--Contamination works</option>

示例显示了4个级别,但级别计数未知。

RESULT

var result = {
  "Subcontractor":12 {
    "Surveyor":108 {
      "Excavation works":62,
      "Concrete works":554
    },
    "Demolition works":44 {
      "Site preparation works":103,
      "Excavation works":67,
      "Contamination works":40
    }
  }
};

注意选项值如何仅添加到最深层。更新:eacier代码和一致性的更新结果,父项缺少值,应该更有效地解析此结果。

我的jquery技能是平均的,但我想如果有人可以提出方向,我可以解决这个问题。

2 个答案:

答案 0 :(得分:2)

我在解析对象的选项方面给你一个很好的开始。花费的时间比我预期的要长,并且每个级别的值显示,孩子是一个名为&#34; item&#34;在所有情况下。通过一些额外的映射和重构,您可以获得所需的格式。

http://jsfiddle.net/charlietfl/Z6pzv/

答案 1 :(得分:1)

var struct = {}, path = [], indentation = '-';

$('option').each(function (i, el) {
  var
    $el = $(el),
    val = $el.val(),
    label = $el.text(),
    depth = 0,
    parent = struct,
    i;

  while (label.substr(0, indentation.length) === indentation) {
    depth += 1;
    label = label.substr(indentation.length);
  }

  path = path.slice(0, depth);
  path[depth] = label;

  for (i = 0; i < path.length; i += 1) {
    if (typeof parent[path[i]] !== 'object') {
      parent[path[i]] = {};
    }

    if (i < path.length - 1) {
      parent = parent[path[i]];
    }
    else {
      parent[path[i]] = val;
    }
  }
});

console.log(struct);​

http://jsfiddle.net/5zqZQ/4/

以前的版本:http://jsfiddle.net/5zqZQ/3/