Как через гет запрос разобрать json массив в html

Question

Прошу совета или помощи. Если json файл с данными, в котором могут быть множественные элементы внутри друг друга. Проблема заключается в том, что как получить все вложенные массива у элемента. Первый уровень (так скажем родителей) получаю без проблем. А вот с дочерними - ступор.

$.ajax({ 
    url: '/json/', 
    type: 'GET',
    data: { get_param: 'value' }, 
    dataType: 'json',
    success: function (data) { 
        console.log(data);
     
     $.each(data, function(index, element) {
        
        $('#mobile_menu').append($('<ul>', {
            
            text: element.title + element.url + element.children[title]
        }));
    });
     
    }
});
    });

[
{
    "title": "Родитель 1",
    "url": "http://domain.com/url/"
},
{
    "title": "Родитель 2",
    "url": "http://domain.com/url2/",
    "children": [{
            "title": "Потомок 1",
            "url": "http://domain.com/url2/child1/"
        },
        {
            "title": "Потомок 2",
            "url": "http://domain.com/url2/child2/"
            "children": [{
                    "title": "Потомок Потомка 1",
                    "url": "http://domain.com/url2/child1/child2/"
                },
                {
                    "title": "Потомок Потомка 2",
                    "url": "http://domain.com/url2/child1/child3/"
                }
            ]
        }
    ]
},
{
    "title": "Родитель 3",
    "url": "http://domain.com/url3/"
}]

Answer 1

Сделал через рекурсию и накидал простой пример сервера на python + заполнение

Проверка работы функций:

function process_children(children, parent_element) {
    if (children) {
        let ul = $('<ul>');
        parent_element.append(ul);

        children.forEach(child_data => {
            process_data(child_data, ul);
        });
    }
}

function process_data(item_data, parent_element) {
    let item_element = $('<li>', {
        text: `${item_data.title}: ${item_data.url}`
    });
    parent_element.append(item_element);

    process_children(item_data.children, item_element);
}

let data = [
  {
    "title": "\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c 1", 
    "url": "http://domain.com/url/"
  }, 
  {
    "children": [
      {
        "title": "\u041f\u043e\u0442\u043e\u043c\u043e\u043a 1", 
        "url": "http://domain.com/url2/child1/"
      }, 
      {
        "children": [
          {
            "title": "\u041f\u043e\u0442\u043e\u043c\u043e\u043a \u041f\u043e\u0442\u043e\u043c\u043a\u0430 1", 
            "url": "http://domain.com/url2/child1/child2/"
          }, 
          {
            "title": "\u041f\u043e\u0442\u043e\u043c\u043e\u043a \u041f\u043e\u0442\u043e\u043c\u043a\u0430 2", 
            "url": "http://domain.com/url2/child1/child3/"
          }
        ], 
        "title": "\u041f\u043e\u0442\u043e\u043c\u043e\u043a 2", 
        "url": "http://domain.com/url2/child2/"
      }
    ], 
    "title": "\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c 2", 
    "url": "http://domain.com/url2/"
  }, 
  {
    "title": "\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c 3", 
    "url": "http://domain.com/url3/"
  }
]
;

let parent_element = $('#mobile_menu');
process_children(data, parent_element);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="mobile_menu">
</div>

Для ajax:

$(document).ready(function() {
    $.ajax({
        url: '/json/',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            console.log(data);

            let parent_element = $('#mobile_menu');
            process_children(data, parent_element);
        }
    });
});

БЛОГ НА HUSL

Как через гет запрос разобрать json массив в html

Ответы (1 шт):