Change UL to a JSON format

Question

Change UL to a JSON format

I am attempting to transform an entire unordered list (UL) and its child elements into a JSON object.

Here is the approach we took:

function extractData(element) {
    element.find('li').each(function () {
        data.push({ "name": $(this).find('span').html(), "position": $(this).find('strong').html() });
    });
}

JS Fiddle showcasing the code: https://jsfiddle.net/cbzo0ef2/2/

However, all elements are on the same level. In this scenario, it's necessary to maintain all levels accordingly.

javascript jquery json

Answer 1

Answer №1

$(this).parents("ul").length is a clever solution to consider:

function fetchData(element) {
    element.find('li').each(function () {
        data.push({ "name": $(this).find('span').html(), "position": $(this).find('strong').html(), "departmentLevel": $(this).parents("ul").length  })
    });
  }

Additional effort is required to incorporate department level into your json structure

Check out this example for reference

Answer 2

$(this).parents("ul").length is a clever solution to consider:

function fetchData(element) {
    element.find('li').each(function () {
        data.push({ "name": $(this).find('span').html(), "position": $(this).find('strong').html(), "departmentLevel": $(this).parents("ul").length  })
    });
  }

Additional effort is required to incorporate department level into your json structure

Check out this example for reference

Answer 3

Answer №2

Here is a JavaScript solution that extracts data from HTML elements while maintaining the structure:

(function($) {

    function getData(el) {
        var data = [];

        el.children('li').each(function () {
            var currentElement = $(this);

            var nomeElement = currentElement.children('span')[0];
            var cargoElement = currentElement.children('strong')[0];

            var item = {};

            if (nomeElement && cargoElement) {
                item.nome = $(nomeElement).html();
                item.cargo = $(cargoElement).html();
            }

            data.push(item);

            var child = currentElement.children('ul')[0];

            if (child != null) {
                item.children = getData($(child));
            }
        });

        return data;
    }

    var data = getData($('.root'));
    console.log(data);

})(jQuery);

You can view this code in action on JSFiddle: https://jsfiddle.net/52t58551/

Answer 4

Here is a JavaScript solution that extracts data from HTML elements while maintaining the structure:

(function($) {

    function getData(el) {
        var data = [];

        el.children('li').each(function () {
            var currentElement = $(this);

            var nomeElement = currentElement.children('span')[0];
            var cargoElement = currentElement.children('strong')[0];

            var item = {};

            if (nomeElement && cargoElement) {
                item.nome = $(nomeElement).html();
                item.cargo = $(cargoElement).html();
            }

            data.push(item);

            var child = currentElement.children('ul')[0];

            if (child != null) {
                item.children = getData($(child));
            }
        });

        return data;
    }

    var data = getData($('.root'));
    console.log(data);

})(jQuery);

You can view this code in action on JSFiddle: https://jsfiddle.net/52t58551/

Answer 5

Answer №3

By using the jQuery Children method and implementing recursion, it is possible to retrieve every node.

(function($) {
  function fetchData(element) {
    var currentData = [];
    element.children('li, ul').each(function(index, childElement) {
      currentData.push({
        nodeName: childElement.nodeName,
        name: $(childElement).find("> span").text(),
        position: $(childElement).find("> strong").text(),
        subLevelData: fetchData($(childElement))
      });
    });
    return currentData
  }

  var finalResult = fetchData($('.root'));
  console.log(JSON.stringify(finalResult));

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="root"> <li><span>a</span><strong>b</strong></li><li><span>c</span><strong>d</strong></li><li><span>e</span><strong>f</strong></li><li> <ul> <li><span>g</span><strong>h</strong></li><li><span>i</span><strong>j</strong></li><li> <ul> <li><span>k</span><strong>l</strong></li></ul> </li></ul> </li></ul>

Answer 6

By using the jQuery Children method and implementing recursion, it is possible to retrieve every node.

(function($) {
  function fetchData(element) {
    var currentData = [];
    element.children('li, ul').each(function(index, childElement) {
      currentData.push({
        nodeName: childElement.nodeName,
        name: $(childElement).find("> span").text(),
        position: $(childElement).find("> strong").text(),
        subLevelData: fetchData($(childElement))
      });
    });
    return currentData
  }

  var finalResult = fetchData($('.root'));
  console.log(JSON.stringify(finalResult));

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="root"> <li><span>a</span><strong>b</strong></li><li><span>c</span><strong>d</strong></li><li><span>e</span><strong>f</strong></li><li> <ul> <li><span>g</span><strong>h</strong></li><li><span>i</span><strong>j</strong></li><li> <ul> <li><span>k</span><strong>l</strong></li></ul> </li></ul> </li></ul>

Change UL to a JSON format

Answer №1

Answer №2

Answer №3

Similar questions

Failed to transmit data to the CouchDB database

What is the process for deserializing a JSON-wrapped collection property into a generic class

js The correct value is not being set to the div's style.top

FrisbyJS and JSONSchema encounter a SchemaError when the specified schema does not exist

Creating a repository of essential functions in AngularJSDiscover the steps to set up a

Showing Json information using ajax in Codeigniter 4

What is the best way to make an element disappear 5 seconds after the mouse has stopped hovering

Retrieving information from an ajax array in PHP

Troubleshooting jQuery Ajax issues in a modularized environment

Tips for displaying identical tab content across various tabs using jquery or javascript

Tips for chaining actions in Javascript using ActionSequence, LegacyActionSequence, or a similar method

Discovering the key within a complicated JSON file using C# and the Newtonsoft library

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

Having an issue with receiving an "undefined variable" error message when trying to validate a form using PHP and AJAX

Combining these two statements in jQuery: What's the best way to do it?

What is the most efficient method to import multiple MaterialUI components using a shared namespace without requiring the entire library to be imported

Utilizing JavaScript to call functions from an ASP.NET code file

How to implement multiple dependent select boxes in Rails?

Tips for managing the onblur event using selenium automation framework

Utilizing Ajax for populating a cascading selection menu