How to make string to json with javascript? (like A//a1,A//a2,A//a3//a31 ..)

Question

How to convert a string to JSON with javascript or jQuery? I've been thinking all day, but I do not get a good idea.

This task is to dynamically create the treeview in the client side (ASP.Net). My idea is to convert the string to an object and convert to JSON type. (String -> object -> JSON) I tried, but the day is gone. It is difficult to construct 2 more depth like A->a3->a31.

String is

var sString = "A//a1,A//a2,A//a3//a31,A//a3//a32,B,C//c1,C//c2";

and JSON format is

{
  "title": "A",
  "key": "1",
  "folder": true,
  "children": [{
      "title": "a1",
      "key": "2"
    }, {
      "title": "a2",
      "key": "3"
    }, {
      "title": "a3",
      "key": "4",
      "folder": true,
      "children": [{
          "title": "a31",
          "key": "5"
        }...
      }]
  }

(This is fancytreeview plugin)

‘//‘ is depth and ‘,’ is split.

Please help me..

Edit) I want to turn ‘sString’ to JSON format.. but It’s ok just JSON type string.

Please understand that my sentence is strange because my native language is not English.

Edit2) oh.. I want to convert the string to an object and then convert it back to JSON format. I do not have the confidence to convert that string into JSON format right away. Because there are more than 8000 variants. If It’s can, let me know how.

Answer 1

I believe this can be done without recursion:

var string = "A//a1,A//a2,A//a3//a31,A//a3//a32,B,C//c1,C//c2";

// Take all the roots
var roots = string.split(',');

// We will attach it to every node and keep it incrementing
var key = 1;

// The final result will be in this object
var result = [];

// Loop through to found roots
roots.forEach(function(root) {
  // Take all the children
  var items = root.split('//');
  var parent = result;

  // Loop through the available children
  items.forEach(function(item, i) {
    // Find if the current item exists in the tree
    var child = getChild(parent, item);

    if (!child) {
     child = {
        title: item,
        key: key++
      }
      
      // This will ensure that the current node is a folder only
      // if there are more children
      if (i < items.length - 1) {
       child.folder = true;
        child.children = [];
      }
      
      // Attach this node to parent
      parent.push(child);
    }
    
    parent = child.children;
  });
});

console.log(result);

// Utility function to find a node in a collection of nodes by title
function getChild(parent, title) {
  for (var i = 0; i < parent.length; i++) {
    if (parent[i].title === title) {
      return parent[i];
    }
  }
}

This is the draft code which came in my mind at first. I believe it can be improved further in terms of complexity.

Answer 2

var key = 1; // keys start at 1

let addPaths = (root, paths) => {

    if (!paths || paths.length == 0)
        return;

    let path = paths.shift();

    //add nodes for the current path
    addNodes(root, path.split('//'));

    // keep going until all paths have been processed
    addPaths(root, paths);
};

let addNodes = (root, nodeList) => {

    if (!nodeList || nodeList.length == 0)
        return;

    let title = nodeList.shift();

    // find node under root with matching title
    let isRootNode = Array.isArray(root);

    node = (isRootNode ? root : root.children || []).find((node) => {
        return node.title == title;
    });


    if (!node){
        node = {
            title: title,
            key: key++
        }

        // are we at root of object?
        if (isRootNode)
            root.push(node);
        else
        {
            if (!root.children)
                root.children = [];

            root.children.push(node);
            root.folder = true;
        }
    }

    addNodes(node, nodeList);
};

let parse = (string) => {
    let object = [];

    let nodes = string.split(',');

    addPaths(object, nodes);

    return object
};

console.log(JSON.stringify(parse("A//a1,A//a2,A//a3//a31,A//a3//a32,B,C//c1,C//c2"), null, 2));

Which results in:

[
  {
    "title": "A",
    "key": 1,
    "children": [
      {
        "title": "a1",
        "key": 2
      },
      {
        "title": "a2",
        "key": 3
      },
      {
        "title": "a3",
        "key": 4,
        "children": [
          {
            "title": "a31",
            "key": 5
          },
          {
            "title": "a32",
            "key": 6
          }
        ],
        "folder": true
      }
    ],
    "folder": true
  },
  {
    "title": "B",
    "key": 7
  },
  {
    "title": "C",
    "key": 8,
    "children": [
      {
        "title": "c1",
        "key": 9
      },
      {
        "title": "c2",
        "key": 10
      }
    ],
    "folder": true
  }
]

Answer 3

Try below code. I have used associative array to store already processed folder for faster lookup.

I hope it helps you.

var sString = "A//a1,A//a2,A//a3//a31,A//a3//a32,B,C//c1,C//c2";

var sArr = sString.split(","); // We will split it by comma so that we can iterate through its items.
var output = []; // Final result will be stored here.
var hash = {}; // It used to keep track of itemObjectect's position for faster lookup.
var counter = 1; // Its value will be used to assign to key;
for(var i = 0; i < sArr.length; i++){
    var items = sArr[i].split("//"); 
    var itemObject = {}; // Object to store value of each item.
    var parentItemObject = {}; // It will refer to current parentObject during iteration.
    for(var j = 0; j < items.length; j++){
   // Check if item is already processed and stored in hash map.
   if(hash.hasOwnProperty(items[j])){
     // Check if parent Object value is empty then we will fetch it from hash directly.
     if(isEmpty(parentItemObject)){
    parentItemObject = output[hash[items[j]]];
     }
     else{
    // It is parent element but is child of another element. Then we will fetch it from it's children array.
    if(typeof parentItemObject.children !== "undefined"){
      parentItemObject = parentItemObject.children[hash[items[j]]];
    }
     }
     continue;
   }  
   
    itemObject.title = items[j];
    itemObject.key = counter++;
     
     // Check if it is a folder item.
     if(j != items.length -1){
    itemObject.folder = true;
    itemObject.children = [];
    if(isEmpty(parentItemObject)){
     parentItemObject = itemObject;
     hash[itemObject.title] = output.length;
     output.push(itemObject);
    }
    else{
     if(typeof parentItemObject.children !== "undefined"){
       hash[itemObject.title] = parentItemObject.children.length;
       parentItemObject.children.push(itemObject);
     }
     parentItemObject = itemObject;
    }
     }
     else{
    
    if(isEmpty(parentItemObject)){
     parentItemObject = itemObject;
     hash[itemObject.title] = output.length;
     output.push(itemObject);
    }
    if(typeof parentItemObject.children !== "undefined"){
      hash[itemObject.title] = parentItemObject.children.length;
      parentItemObject.children.push(itemObject);
    }
     }
   
   itemObject = {};
    }
    
    //console.log(items);
  }

function isEmpty(itemObject) {
  return Object.keys(itemObject).length === 0;
}

//console.log(hash);
console.log(JSON.stringify(output,null,2));