Un-Ordered List to JSON and vice-versa
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Using DraftJS ( or similar library ), render an html5 editor ( or develop a plugin ) which :

  • Only allows unordered/hierarchical list
  • Outputs the list in JSON format.
  • Can read a json and render the output in unordered/hierachical list.

Example

  • Parent1
    • Child1
    • Child2
      • Child21
json = [ parent : "Parent1", children : [ { parent : "Child1" , children : [ ] }, { parent : "Child2" , children : [ { parent : "Child21" , children : [ ] } ] } ] ]

Note:

  • The JSON structure above is just an example. If a different structure makes sense, please free to use so.
  • If using library like DraftJS, the solution could be a plugin, or configuration settings on DraftJS Editor itself ( to disable all other features except Lists )
Hey azfx, do you want this to be done in DraftJs or can we use Javascript in general ?
Subhash Dasyam 2 years ago
Hi Subhash, It does not have to be done in DraftJS as long as the solution permits live editing of list.
azfx 2 years ago
Hi azfx, i have completed the solution and its live :) its done with jQuery
Subhash Dasyam 2 years ago
awarded to gabrielsimoes

Crowdsource coding tasks.

3 Solutions


Here is the code that i use always. it should run whatever the json is recursive or not. always giving the right response. you can also see it running on jsfiddle:

1.Link (from json to recursive ul list) : https://jsfiddle.net/5czrbxpj/

2.Link (from recursive ul list to json) : https://jsfiddle.net/2y2sxbzp/

1.Here is full code: (from json to recursive ul list)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script language="JavaScript" type="text/javascript">

// Here is the code I use.  You should be able to adapt it to your needs.

function process_test_json() {
  var jsonDataArr = { "Errors":[],"Success":true,"Data":{"step0":{"collectionNameStr":"ideas_org_Private","url_root":"http:\/\/192.168.1.128:8500\/ideas_org\/","collectionPathStr":"C:\\ColdFusion8\\wwwroot\\ideas_org\\wwwrootchapter0-2\\verity_collections\\","writeVerityLastFileNameStr":"C:\\ColdFusion8\\wwwroot\\ideas_org\\wwwroot\\chapter0-2\\LastFileName.txt","doneFlag":false,"state_dbrec":{},"errorMsgStr":"","fileroot":"C:\\ColdFusion8\\wwwroot\\ideas_org\\wwwroot"}}};




var htmlStr= "<h3 class='recurse_title'>[jsonDataArr] struct is</h3> " + recurse( jsonDataArr );
alert( htmlStr );
$( document.createElement('div') ).attr( "class", "main_div").html( htmlStr ).appendTo('div#out');
$("div#outAsHtml").text( $("div#out").html() ); 
}
function recurse( data ) {
  var htmlRetStr = "<ul class='recurseObj' >"; 
  for (var key in data) {
        if (typeof(data[key])== 'object' && data[key] != null) {
            htmlRetStr += "<li class='keyObj' ><strong>" + key + ":</strong><ul class='recurseSubObj' >";
            htmlRetStr += recurse( data[key] );
            htmlRetStr += '</ul  ></li   >';
        } else {
            htmlRetStr += ("<li class='keyStr' ><strong>" + key + ': </strong>&quot;' + data[key] + '&quot;</li  >' );
        }
  };
  htmlRetStr += '</ul >';    
  return( htmlRetStr );
}

</script>
</head><body>
<button onclick="process_test_json()" >Run process_test_json()</button>
<br><br><br>
<label>Sorted Result :</label><br>
<div id="out"></div>
<br><br><br>
<label>Result Struct :</label><br>
<div id="outAsHtml"></div>
</body>

<!-- QUESTION: Maybe some one with more jquery experience 
could convert this to a shorter / pure jquery method -->

2.Here is full code: (from recursive ul list to json)

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Recursive list processor example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

$(document).ready(function() {

    var out = [];

    function processOneLi(node) {       

        var aNode = node.children("a:first");
        var retVal = {
            "title": aNode.attr("title"),
            "url": aNode.attr("href"),
            "name": aNode.text()
        };

        node.find("> .children > li").each(function() {
            if (!retVal.hasOwnProperty("children")) {
                retVal.children = [];
            }
            retVal.children.push(processOneLi($(this)));
        });

        return retVal;
    }

    $("#mycustomid").children("li").each(function() {
        out.push(processOneLi($(this)));
    });


    console.log("got the following JSON from your HTML:", JSON.stringify(out));
    $("#result").html(JSON.stringify(out));

});

    </script>
</head>
<body>
<ul id="mycustomid">
    <li><a href="http://example.com/urlOfItemA" title="sometitle">Item A</a>
        <ul class="children">
           <li><a href="http://example.com/urlOfItemAChild1" title="sometitle">Child1 of A</a>
               <ul class="children">
                 <li><a href="http://example.com/urlOfItemAGrandchild" title="sometitle">Grandchild of A</a>
                    <ul class="children">
                       <li><a href="http://example.com/urlOfItemAGrandGrandChild" title="sometitle">Grand Grand child of A</a></li>
                    </ul>
                </li>
               </ul>
           </li>
        </ul>
    </li>
    <li><a href="http://example.com/urlOfItemB" title="sometitle2">Item '"" B</a></li>
    <li><a href="http://example.com/urlOfItemC" title="sometitle3">Item C</a></li>
</ul>
<br><br><br><br>
<label>The Result right Here</label><br><br>
<div id="result"></div>

</body>
</html>
Houcem : Thanks for your solution, though it does not meet the bounty requirement. The output should be in JSON, and the solution should allow editing of the unordered/hierarchical list ( thus the reference to DraftJS editor library ).
azfx 2 years ago
i added right now another script (was searching for it in my files) that convert ul to json. is that what you want?
Chlegou 2 years ago
ah i didn't read the first line :p anyway if this helped you you can tip me :p
Chlegou 2 years ago
thank you for the tip! :D if you want, you can explain it more for me (how the desired draft process need to work), and i will see what i can do for you. (giving examples helps a lot!)
Chlegou 2 years ago
Take a look at "Rich Text" example hosted here: https://draftjs-examples.herokuapp.com/ Now if we remove the tool bar, and enable "UL" as the default Rich Text Style, that would be the desired behavior as far as the first requirement ( editor ) is concerned. It seems draftjs does have an api to output rawcontent as JSON, and that solves the next requirement as well. If you wish to explore the draftjs settings and are able to get it customized as above, I will consider that as a solution! Let me know if you have more questions.
azfx 2 years ago

Hi azfx,

I have completed what you wanted here

DEMO

Unordered Lists to Json

https://jsfiddle.net/mvjcugj8/1/

Json to Unordered Lists

https://jsfiddle.net/q2rm6sge/

Both in Single file

https://gist.github.com/subhashdasyam/f50ae90f3599d14407d2b7e8f18b465c

Please test it and let me know :)

Winning solution

Here's my solution's demo:

http://jsfiddle.net/gh/gist/library/pure/469f1b1d6aeb1c391a418700293d3449/

And I hosted it on gist here:

https://gist.github.com/gabrielsimoes/469f1b1d6aeb1c391a418700293d3449

I have implemented the live list editor and an input field for the JSON with TinyMCE instead of DraftJS, and also used JQuery to do the parsing. Just let me know if you need something changed.

Exactly what I was looking for, thanks!
azfx almost 2 years ago
View Timeline