Question

I have this ugly select list with indents (“-“) to illustrate hierarchy. I would like, using jquery, to get data from source to result.

Source

<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>

Example shows 4 levels, but levels count is unknown.

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
    }
  }
};

Notice how option value is added to deepest level only. UPDATE: updated result for eacier code and consistency, parents were missing value, it should be esier to parse to this result.

My jquery skills are average, but I think I could figure this out if someone could suggest direction.

Answer 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/

previous version: http://jsfiddle.net/5zqZQ/3/