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

使用object代替值的数组，然后将值添加到对象。在向对象添加项目时，请首先检查键的值是否未定义（如果未将其附加到现有值后，则可以用逗号分隔），如下所示。同样，如果它可以是数组，我们可以将值推送到属性。

类似的东西：

 var values = {};

 if(values.title1){
   values.title1 =  values.title1 + ',' +title1;
  }
else{
  values.title1 = title1;
}

 // if array then,

var values = {};

 if(values.title1 && values.title1.length > 0 ){
   values.title1.push(title1)
  }
else{
  values.title1 = [title1];
}

推送检查属性时也是如此。

Answer 2

根据问题中提供的HTML，您可以遍历label，并从下一个div元素获取文本。如下所示：-

$(function() {
    const data = $('[id*="topic-preview-"]').map(function(index, elem) {
        return {
            [$(this).attr('id').replace(/-/g, '')]: $(this).next().text().trim()
        }
    }).get();
    console.log(JSON.stringify(data));
});

$(function() {
  const data = $('[id*="topic-preview-"]').map(function(index, elem) {
    return {
      [$(this).attr('id').replace(/-/g, '')]: $(this).next().text().trim()
    }
  }).get();
  
  console.log(JSON.stringify(data));
});

<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">item list</div>
  </div>
  <div class="col tms-check-column">
    <label class="informationTitle" id="topic-preview-right">Topic Example Right</label>
    <div id="p-example-right">item list</div>
  </div>
</div>

Answer 3

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

x = 0
while x < 5:
    if x == 2:
        continue
    print(x)
    x += 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();

Answer 4

好的，根据您的要求，我会尝试根据您的需要创建结构并进行某种程度的修改，以使您轻松理解。

<div id="topic-preview-left">
Topic Example Left  
</div>
<div id="p-example-left">
<p>Topic Example Left</p>
<p>Medicaid</p>
</div>
<div id="topic-preview-right">
Topic Example right  
</div>
<div id="p-example-right">
<p>Topic Example right</p>
<p>Active duty military</p>
</div>

   var leftKey  = $("#topic-preview-left").text();
var rightKey = $("#topic-preview-right").text();

var pLeftExamples = [];
  $("#p-example-left > p").each(function() {
            pLeftExamples.push($(this).html());
        });
var pRightExamples = [];
$("#p-example-right > p").each(function() {
  pRightExamples.push($(this).html());
});    

var mainObject = {};
mainObject[leftKey] = pLeftExamples;
mainObject[rightKey] = pRightExamples;
console.log(mainObject);

输出：

{…}

"
Topic Example Left  
": Array [ "Topic Example Left", "Medicaid" ]

"
Topic Example right  
": Array [ "Topic Example right", "Active duty military" ]

jsfiddle的链接：https://jsfiddle.net/dupinderdhiman/b3zevumk/51/

看看，如果什么都不懂，请告诉我，我会解释

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

4 个答案: