javascript, преобразующий структуру dom в хеш-объект

Question

Мне нужно создать разумный хеш из выбранных элементов структуры DOM:

    <div name="stuff" class="category">
        <div class="category" name="Person">
            <div class="option selected" >Kennedy</div>
        </div>
        <div class="category" name="fruit">
            <div class="option" >Apple</div>
            <div class="option selected" >Banana</div>
        </div>
        <div class="category" name="Org">
            <div class="option" name="Association">
                <div class="option" >NBA</div>
                <div class="option selected" >MPAA</div>
            </div>
            <div class="option" name="Federation">
                <div class="option" >Russian</div>
                <div class="option" >United Federation of Planets</div>
            </div>
        </div>
    </div>

    <div name="attributes" class="category">
        <div class="category" name="color">
            <div class="option selected" >red</div>
            <div class="option" >yellow</div>
        </div>
        <div class="category" name="time">
            <div class="option selected" >future</div>
            <div class="option" >past</div>
        </div>
    </div>

Какой самый простой способ получить разумный хеш из выбранных элементов здесь?

Есть вложенные категории, и неизвестно, насколько далеко заходит вложенность.

Хеш должен выглядеть примерно так:

{
    "stuff" : {
        "Person": "Kennedy",
        "fruit": "Banana",
        "Org" : {
            "Association": "MPAA",
        }
    },
    "attributes" : {
        "color" : "red",
        "time" : "future"
    }
}

Как мне это сделать?Спасибо.

Сегодня я сделал еще один снимок: несколько вещей, которые я заметил, были ошибки из DOM выше.Ассоциация и Федерация должны быть категориями, а не вариантами.Само собой разумеется, что если бы они были вариантами (например, если Федерация и Ассоциация были взаимоисключающими), тогда Ассоциация была бы «выбрана».

Предполагая, что они являются категориями, вот мой код:

function DOMtoJSON(el){
  el.find('div.option:not(.selected)').remove();
  el.find('div.option:empty').remove();

  var createObj = function (thisCategory, parentObj) {
    if (thisCategory.children('.option').length > 0) {
      parentObj[thisCategory.attr('name')] = thisCategory.children('.option').text();
    }
    if (thisCategory.children('.category').length > 0) {
      parentObj[thisCategory.attr('name')] = {};
      thisCategory.children('.category').each(function () {
        createObj($(this), parentObj[thisCategory.attr('name')]);
      });
    } else {
      return parentObj;
    }
  }
  var obj = {}
      el.children('.category').each(function () {
        createObj($(this), obj)
      });

  return obj;
}


var root = DOMtoJSON($('#root'));
document.getElementById('root').innerHTML = JSON.stringify(root);

Может ли кто-нибудь дать мне какие-нибудь блины.Это было бы здорово

Answer 1

Я поставил рабочее, если неуклюжее, решение онлайн здесь: http://jsfiddle.net/btJD6/2/

Вот код:

function childrenWithAttribute(el,tagName,attrName){
  if (!tagName)  tagName = '*';
  if (!attrName) attrName = 'name';
  var kids = [];
  for (var i=0,len=el.childNodes.length;i<len;++i){
    var kid = el.childNodes[i];
    if (tagName!='*' && kid.tagName != tagName) continue;
    if (kid.nodeType!=1) continue;
    if (!kid.hasAttribute(attrName)) continue;
    kids.push(kid);
  }
  return kids;
}

function objectify(el,kidTags,kidAttr){
  if (!kidTags) kidTags = '*';
  if (!kidAttr) kidAttr = 'name';
  var kids = childrenWithAttribute(el,kidTags,kidAttr);
  if (kids.length){
    var obj = {};
    for (var i=0,len=kids.length;i<len;++i){
      var key = kids[i].getAttribute(kidAttr);
      obj[key] = objectify(kids[i],kidTags,kidAttr);
    }
    return obj;
  }else{
    return (el.getElementsByClassName('selected')[0] ||
           el.getElementsByClassName('option')[0]   ||
           el.getElementsByTagName('*')[0]).textContent;
  }
}
var root = objectify( document.getElementById('root') );
document.getElementById('output').innerHTML = JSON.stringify(root);

Вот вывод (с улучшенным форматированием для отображения):

{
  "stuff":{
    "Person":"Kennedy",
    "fruit":"Banana",
    "Org":{
      "Association":"MPAA",
      "Federation":"Russian"
    }
  },
  "attributes":{
    "color":"red",
    "time":"future"
  }
}

Он не совсем соответствует желаемому результату - он включает опцию «Федерация», даже если «опция» не была «выбрана», но она дает вам 90% пути. Теперь вы можете закончить это самостоятельно.

Answer 2

вы можете использовать этот плагин jquery, чтобы сделать это jQuery xmlObjectifier