jquery - 如何将 html 文本转换为有组织的 json 数组？

Question

我有 2 个 html div，我需要以特定方式循环遍历它们的 html 和格式。

//Desired output

    { 
    "nameoffirstcategory" : {a , b, c, d, e, f},
    "nameofsecondcategory" : {a , b , c ,d ,e,f} 
    }

这是两个复选框列的 html。

      <h5>Preview</h5>
              <div class="row">
                 <div class="col tms-check-column">
                    <label class="informationTitle" id="topic-preview-left">Topic Example Left</label>
                    <div id="p-example-left">
                    </div>
                 </div>
                 <div class="col tms-check-column">
                    <label class="informationTitle" id="topic-preview-right">Topic Example Right</label>
                    <div id="p-example-right">
                    </div>
                 </div>
              </div>
           </div>
           <div class="modal-footer">
              <p class="tms-autosaved-txt">AutoSaved</p>
              <button onclick="saveAllItems();" type="button" class="btn btn-secondary">Auto Save</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
           </div>

我尝试将这些值推送到名为 .each 循环中的值的数组中。但我的格式是这样的

// output I get from my javascript.

    [{"titlel":"Topic Example Left"},
     {"check":"Cash or self-payment"},
     {"check":"Medicaid"},

     {"titler":"Topic Example Right"},
     {"check":"Persons with co-occurring mental and substance abuse},
     {"check":"Active duty military"}]

在这里，我很好地循环了各列并获取了我需要的所有数据。问题是 json 输出的格式不正确，如上面所需的输出。

    // my javascript function

    function saveAllItems() {

        let values = [];

        titlel = jQuery("#topic-preview-left").text();
        titler = jQuery("#topic-preview-right").text();

        values.push({
            titlel: titlel
        });

        // left column text
        jQuery("#p-example-left > p").each(function() {

            let check = jQuery(this).html();
            values.push({
                check: check
            });

        });

        values.push({
            titler: titler
        });


        // right column text
        jQuery("#p-example-right > p").each(function() {
            let check = jQuery(this).html();

            values.push({
                check: check
            });
        });

        let json = JSON.stringify(values);
        console.log(json);


    }

Answer 1

您可以使用嵌套循环来完成此操作，如下所示:

function saveAllItems() {
    var values = {};
    jQuery("[id*=topic-preview]").each(function () {
        var $items = jQuery("div[id*=p-example] > p", $(this).parent());
        values[jQuery(this).text()] = $items.map(function () {
            return jQuery(this).text();
        }).get();
    });
    console.log(values);
}
saveAllItems();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col tms-check-column">
    <label class="informationTitle" id="topic-preview-left">Topic Example Left</label>
    <div id="p-example-left">
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
    </div>
  </div>
  <div class="col tms-check-column">
    <label class="informationTitle" id="topic-preview-right">Topic Example Right</label>
    <div id="p-example-right">
        <p>g</p>
    </div>
  </div>
</div>