Как мне преобразовать html-текст в организованный массив json?

ProgramBox

Как мне преобразовать html-текст в организованный массив json?

Post author:admin
Запись опубликована:13 апреля, 2023
Post category:Вопросы по программированию

#jquery #json

Вопрос:

У меня есть 2 html-раздела, мне нужно просмотреть их 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>

Я попытался перенести значения в массив с именем values в циклах .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);


    }

1. Некоторые в соответствии с вашим контентом, что на самом деле вы хотите {nameoffirstcategory :{"titlel":"Topic Example Left"}, {"check":"Cash or self-payment"}, {"check":"Medicaid"}, nameofsecondcategory: {"titler":"Topic Example Right"}, {"check":"Persons with co-occurring mental and substance abuse}, {"check":"Active duty military"}} Так это то, что вы хотите, или нет?

2. Мне нужен формат json, который должен быть. Я понятия не имею, как это сделать. { «заголовок категории слева»: {item1, item2, item3}, «заголовок категории справа»: {item1, item2, item3} }

Ответ №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>

1. Это отличный ответ, он работает именно так, как я хочу, когда я запускаю ваш код. Единственная проблема в том, что когда я запускаю его в своем html-файле, он возвращает следующее { «Оплата»: [], «Специальные программы»: [ ], «левая динамическая пятерка»:[ «Оплата наличными или самостоятельно», «Medicaidd», «Medicare», ], «правая динамическая тройка»: [ «Лица с сопутствующими психическими расстройствами и злоупотреблением психоактивными веществами», «Лица с расстройствами пищевого поведения»] }

2. Хорошо, значит, у вас есть другие элементы с тем же классом. Возможно, этот селектор не будет соответствовать тем другим элементам? jQuery("[id*=topic-preview]").each(...

Ответ №2:

Вместо массива значений используйте object и добавьте значения к объекту. При добавлении элементов в объект сначала проверьте, не определено ли значение ключа, если нет, добавьте к существующему значению запятую, если это может быть строка, как показано ниже. Также в случае, если это может быть массив, мы можем перенести значения в свойство.

Что-то вроде:

  var values = {};

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

 // if array then,

var values = {};

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

Таким же образом при нажатии check property также.

Ответ №3:

В соответствии с HTML, предоставленным в вопросе, вы можете перемещаться по label s и получать текст из следующего 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>

Ответ №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 /

посмотрите, если ничего не понимаете, дайте мне знать, я объясню