javascript - 将嵌套列表写成结构化 JSON

Question

我正在使用 jQuery 将嵌套列表写成 JSON。

我遇到了有关嵌套元素的问题。我创建了一个 Plunk，您只需单击一个按钮即可使用它来重现问题。

Plunk:https://plnkr.co/edit/jLi9epblNAtMbzezcRSY?p=preview

HTML:

<h1>Hello Plunker!</h1>
<div class="dd" name="agenda-nestable" id="nestable">
    <ol id="agenda-root" class="dd-list">
            <li class="dd-item" data-id="0" id="0">
                <div class="dd-handle">Pledge of Allegiance</div>
            </li>
            <li class="dd-item" data-id="0" id="0">
                <div class="dd-handle">Roll Call</div>
                    <ol class="dd-list">
                            <li class="dd-item" data-id="0">
                            <div class="dd-handle">Establish a Quorum</div></li>
                    </ol>
            </li>
            <li class="dd-item" data-id="0" id="0">
                <div class="dd-handle">Public Comment</div>
                    <ol class="dd-list">
                            <li class="dd-item" data-id="0">
                            <div class="dd-handle">Address</div></li>
                            <li class="dd-item" data-id="0">
                            <div class="dd-handle">Open Floor</div></li>
                    </ol>
            </li>
            <li class="dd-item" data-id="0" id="0">
                <div class="dd-handle">Action to set agenda and to approve consent agenda items</div>
            </li>
            <li class="dd-item" data-id="0" id="0">
                <div class="dd-handle">Presentations and awards</div>
            </li>
            <li class="dd-item" data-id="0" id="0">
                <div class="dd-handle">Matters set for a specific time</div>
            </li>
            <li class="dd-item" data-id="0" id="0">
                <div class="dd-handle">Regular Agenda</div>
            </li>
            <li class="dd-item" data-id="0" id="0">
                <div class="dd-handle">Governing Board</div>
            </li>
            <li class="dd-item" data-id="0" id="0">
                <div class="dd-handle">Closed Session</div>
            </li>
    </ol>
</div>
<pre id="jsonOutput"></pre>
<button value onclick='convertToJson()'>Convert nodes to JSON</button>

代码:

function convertToJson() {
  var sectionOrder = "";
  var itemOrder = "";
  var sectionDelimiter = "";
  var itemDelimiter = "";

  var agendaDiv = $("[name='agenda-nestable']");
  var agendaSections = $(agendaDiv).find("ol#agenda-root>li");
  var sections = [];

  for (var i = 0; i < agendaSections.length; i++) {
      var agendaSection = agendaSections[i];
      var section = {};
      section.Id = $(agendaSection).attr('data-id');
      section.SectionText = $(agendaSection).find("div:first-child").text(); // Something wrong here
      section.Items = [];

      var sectionItems = $(section).find("ol>li");
      for (var j = 0; j < sectionItems.length; j++) {
          var sectionItem = sectionItems[j];
          var item = {};
          item.Id = $(sectionItem).attr('data-id');
          item.ItemText = $(sectionItem).find("div:first-child").text(); // Something wrong here
          section.Items.push(item);
      }
      sections.push(section);
  }
  var json = JSON.stringify(sections, null, 2);;
  $('#jsonOutput').text(json);
  console.log(json);
  return json;
}

输出:

  {
    "Id": "0",
    "SectionText": "Pledge of Allegiance",
    "Items": []
  },
  {
    "Id": "0",
    "SectionText": "Roll CallEstablish a Quorum", // THIS IS WRONG, should be in Items Array, not munged together
    "Items": []
  },
  {
    "Id": "0",
    "SectionText": "Public CommentAddressOpen Floor", // THIS IS WRONG, should be in Items Array, not munged together
    "Items": []
  },
  {
    "Id": "0",
    "SectionText": "Action to set agenda and to approve consent agenda items",
    "Items": []
  },
  {
    "Id": "0",
    "SectionText": "Presentations and awards",
    "Items": []
  },
  {
    "Id": "0",
    "SectionText": "Matters set for a specific time",
    "Items": []
  },
  {
    "Id": "0",
    "SectionText": "Regular Agenda",
    "Items": []
  },
  {
    "Id": "0",
    "SectionText": "Governing Board",
    "Items": []
  },
  {
    "Id": "0",
    "SectionText": "Closed Session",
    "Items": []
  }
]

非常感谢您的观看，我真的很感激!!!

菲利普

Answer 1

var section = {};

var sectionItems = $(section).find("ol>li");

这是你的问题。您试图将对象用作 jquery 元素。

改用$(agendaSection)。

此外，您的 li 元素具有相同的 id，这是不允许的。

$(document).ready(function () {

  function convertToJson() {

    var nestable = $("#nestable"),
      root = $('#agenda-root'),
      agendaSections = $("#agenda-root>li"),
      sections = [];
    
    agendaSections.each(function() {
      var section = {};
      section.Id = $(this).attr('data-id');
      section.SectionText = $(this).find(".dd-handle").first().text(); // Something wrong here
      section.Items = [];
      
      $(this).find('.dd-list').find('.dd-item').each(function() {
        var item = {};
        item.Id = $(this).attr('data-id');
        item.ItemText = $(this).find(".dd-handle").first().text(); // Something wrong here
        section.Items.push(item);
      })
      sections.push(section);
    });
    
    var json = JSON.stringify(sections, null, 2);
    $('#jsonOutput').text(json);
    console.log(json);
    return json;
  }

  $('#toJson').click(convertToJson);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dd" name="agenda-nestable" id="nestable">
    <ol id="agenda-root" class="dd-list">
      <li class="dd-item" data-id="1" id="1">
        <div class="dd-handle">Pledge of Allegiance</div>
      </li>
      <li class="dd-item" data-id="2" id="2">
        <div class="dd-handle">Roll Call</div>
        <ol class="dd-list">
          <li class="dd-item" data-id="1">
            <div class="dd-handle">Establish a Quorum</div>
          </li>
        </ol>
      </li>
      <li class="dd-item" data-id="3" id="3">
        <div class="dd-handle">Public Comment</div>
        <ol class="dd-list">
          <li class="dd-item" data-id="1">
            <div class="dd-handle">Address</div>
          </li>
          <li class="dd-item" data-id="2">
            <div class="dd-handle">Open Floor</div>
          </li>
        </ol>
      </li>
      <li class="dd-item" data-id="4" id="4">
        <div class="dd-handle">Action to set agenda and to approve consent agenda items</div>
      </li>
      <li class="dd-item" data-id="5" id="5">
        <div class="dd-handle">Presentations and awards</div>
      </li>
      <li class="dd-item" data-id="6" id="6">
        <div class="dd-handle">Matters set for a specific time</div>
      </li>
      <li class="dd-item" data-id="7" id="7">
        <div class="dd-handle">Regular Agenda</div>
      </li>
      <li class="dd-item" data-id="8" id="8">
        <div class="dd-handle">Governing Board</div>
      </li>
      <li class="dd-item" data-id="9" id="9">
        <div class="dd-handle">Closed Session</div>
      </li>
    </ol>
  </div>

  <pre id="jsonOutput"></pre>
  <button type="button" id="toJson">Convert nodes to JSON</button>

这就是它的工作原理。