Блог

Главная - Вопросы по программированию - jQuery: Выполните итерацию по объекту JSON, у которого есть дочерние элементы, и нацелитесь на них отдельно

jQuery: Выполните итерацию по объекту JSON, у которого есть дочерние элементы, и нацелитесь на них отдельно

#jquery #json

Вопрос:

У меня есть структура JSON

 {
  "sections": [
    {
      "name": "Section 1",
      "pre": "Pre text",
      "post": "Post text",
      "inputs": [
        {
          "text_01": "Evidence 01",
          "text_02": "Evidence 02",
          "textarea_01": "Evidence 03",
          "textarea_02": "Evidence 04"
        }
      ]
    },
    {
      "name": "Section 2",
      "pre": "Pre text lad",
      "post": "Post text bro",
      "inputs": [
        {
          "text_03": "Evidence 05",
          "text_04": "Evidence 06",
          "textarea_03": "Evidence 07",
          "textarea_04": "Evidence 08"
        }
      ]
    }
  ]
}

jQuery, который я должен повторить, это:

 $.getJSON( "/training/assets/json/test.json", function( data ) {
  $.each( data["sections"], function( key, val ) {
    console.log('[ ] Top Level');
    console.log(val["name"]);
    console.log(val["pre"]);
    console.log(val["post"]);

    console.log('[ ] Inputs');
    $.each( val["inputs"], function( k, v ) {
      $.each( val["inputs"][k], function( ke, va ) {
        console.log(ke   ' - '   va);
      });
    });
  });
});

Это выплевывает следующее, чего я хочу, но мне было интересно, есть ли более чистый способ добиться того же самого?

введите описание изображения здесь

Комментарии:

1. Я не совсем понимаю, какова цель — если это просто вывод содержимого JSON на консоль, то почему бы просто не сбросить его с помощью console.log(...) или console.dir(...) ? items Для чего используется массив?

2. элементы теперь удалены — я хочу иметь возможность динамически создавать форму, поэтому мне нужно будет указать имя, предварительно, текстовые поля и области текста, а затем опубликовать

Ответ №1:

«Очиститель» — очень субъективный термин, но вы можете сделать код более лаконичным, используя функции со стрелками вместе с Object.entries to для внутреннего цикла.

Кроме того, вы можете получить доступ к свойствам объекта по имени, а не в скобках.

Наконец, вы можете использовать forEach() вместо jQuery для цикла. На самом деле jQuery вообще не нужен.

 let data = {sections:[{name:"Section 1",pre:"Pre text",post:"Post text",inputs:[{text_01:"Evidence 01",text_02:"Evidence 02",textarea_01:"Evidence 03",textarea_02:"Evidence 04"}]},{name:"Section 2",pre:"Pre text lad",post:"Post text bro",inputs:[{text_03:"Evidence 05",text_04:"Evidence 06",textarea_03:"Evidence 07",textarea_04:"Evidence 08"}]}]};

data.sections.forEach(section => {
  console.log('[ ] Top Level');
  console.log(section.name);
  console.log(section.pre);
  console.log(section.post);
  
  section.inputs.forEach(input => {
    Object.entries(input).forEach(item => console.log(`${item[0]} - ${item[1]}`));
  });
});
Метки: , ,