Converting URL-esque information to JSON using JavaScript

Question

Converting URL-esque information to JSON using JavaScript

Does anyone have a solution for converting an array of URL-like data into JSON format?

For example, how can we convert the array

["a.b.c.d", "a.c.e.f", "a.b.c.g"]

into the following JSON structure:

items:{
    text: "a",
    items:[
        {
            text:"b",   
            items:[
            {
                text:"c",
                items:[
                {
                    text:"d",
                    leaf:true
                },
                {
                    text:"g",
                    leaf:true
                }
                ]

            }
            ]
        },
        {
            text:"c",
            items:[
            {
                text:"e",
                items:[
                {
                    text:"f",
                    leaf:true
                }
                ]
            }
            ]
        }
    ]
}

javascript json

Answer 1

Answer №1

Here is a possible solution:

// ['x', 'y'] -> { text: 'x', items: [{ text: 'y', leaf: true }] }
function createStructure(elements) {
  if (elements.length === 0) {
    throw new Error('Unable to process: empty elements');
  } else if (elements.length === 1) {
    return { data: elements[0], leaf: true };
  } else {
    return {
      data: elements[0],
      branches: [createStructure(elements.slice(1))]
    }
  }
}

// 'm.n' -> { data: 'm', branches: [{ data: 'n', leaf: true }] }
function parseData(str) {
  return createStructure(str.split('.'));
}

// Consolidate nodes with the same data.
function mergeNodes(left, right) {
  if (left.data !== right.data) {
    throw new Error('Unable to merge: conflicting data ' + left.data + ', ' + right.data);
  }

  // Same values
  if (left.leaf && right.leaf) {
    return left;
  } else if (left.leaf && !right.leaf) {
    return right;
  } else if (!left.leat && right.leaf) {
    return left;
  } else {
    var combined = left.branches.concat(right.branches);
    return { data: left.data, branches: merge(combined) };
  }
}

// Combine multiple nodes.
function merge(items) {
  var dataToBranch = {};
  var keys = [];
  for (var i = 0; i < items.length; i++) {
    var data = items[i].data;
    if (dataToBranch[data]) {
      dataToBranch[data] = mergeNodes(dataToBranch[data], items[i]);
    } else {
      dataToBranch[data] = items[i];
      keys.push(data);
    }
  }
  keys.sort();
  var mergedNodes = [];
  for (i = 0; i < keys.length; i++) {
    mergedNodes.push(dataToBranch[keys[i]]);
  }
  return mergedNodes;
}

function analyze(strings) {
  var structures = [];
  for (var i = 0; i < strings.length; i++) {
    structures.push(parseData(strings[i]));
  }
  return { branches: merge(structures) };
}

console.log(parseData('m.n.o.p'));

console.log(analyze(["x.y.z.w","x.z.a.b","x.y.z.c"]));

The code might seem cluttered. I avoided using map or reduce due to uncertainties about your platform.

Answer 2

Here is a possible solution:

// ['x', 'y'] -> { text: 'x', items: [{ text: 'y', leaf: true }] }
function createStructure(elements) {
  if (elements.length === 0) {
    throw new Error('Unable to process: empty elements');
  } else if (elements.length === 1) {
    return { data: elements[0], leaf: true };
  } else {
    return {
      data: elements[0],
      branches: [createStructure(elements.slice(1))]
    }
  }
}

// 'm.n' -> { data: 'm', branches: [{ data: 'n', leaf: true }] }
function parseData(str) {
  return createStructure(str.split('.'));
}

// Consolidate nodes with the same data.
function mergeNodes(left, right) {
  if (left.data !== right.data) {
    throw new Error('Unable to merge: conflicting data ' + left.data + ', ' + right.data);
  }

  // Same values
  if (left.leaf && right.leaf) {
    return left;
  } else if (left.leaf && !right.leaf) {
    return right;
  } else if (!left.leat && right.leaf) {
    return left;
  } else {
    var combined = left.branches.concat(right.branches);
    return { data: left.data, branches: merge(combined) };
  }
}

// Combine multiple nodes.
function merge(items) {
  var dataToBranch = {};
  var keys = [];
  for (var i = 0; i < items.length; i++) {
    var data = items[i].data;
    if (dataToBranch[data]) {
      dataToBranch[data] = mergeNodes(dataToBranch[data], items[i]);
    } else {
      dataToBranch[data] = items[i];
      keys.push(data);
    }
  }
  keys.sort();
  var mergedNodes = [];
  for (i = 0; i < keys.length; i++) {
    mergedNodes.push(dataToBranch[keys[i]]);
  }
  return mergedNodes;
}

function analyze(strings) {
  var structures = [];
  for (var i = 0; i < strings.length; i++) {
    structures.push(parseData(strings[i]));
  }
  return { branches: merge(structures) };
}

console.log(parseData('m.n.o.p'));

console.log(analyze(["x.y.z.w","x.z.a.b","x.y.z.c"]));

The code might seem cluttered. I avoided using map or reduce due to uncertainties about your platform.

Answer 3

Answer №2

Feel free to utilize this demonstration.

Simply eliminate any unnecessary formatting ;) and modify the local variables to suit your needs. The parsing logic has been provided for your convenience.

function convertArrayToExtJSTreeNodes(arr) {
    for(i in arr) {
        addNodesToTree(arr[i].split('.'));
    }
    generateExtJSString(root, 0, true); 
}

<a href="http://jsfiddle.net/HxFL6/" rel="nofollow">http://jsfiddle.net/HxFL6/</a>

Answer 4

Feel free to utilize this demonstration.

Simply eliminate any unnecessary formatting ;) and modify the local variables to suit your needs. The parsing logic has been provided for your convenience.

function convertArrayToExtJSTreeNodes(arr) {
    for(i in arr) {
        addNodesToTree(arr[i].split('.'));
    }
    generateExtJSString(root, 0, true); 
}

<a href="http://jsfiddle.net/HxFL6/" rel="nofollow">http://jsfiddle.net/HxFL6/</a>

Converting URL-esque information to JSON using JavaScript

Answer №1

Answer №2

Similar questions

Allow Microsoft OAuth authentication for web applications only, restricting access to other Microsoft services

What is the jQuery method for generating a new element?

What is the significance of declaring a constant array in JavaScript?

Resetting input field based on callback function

Is it achievable to modify the appearance of the "Saved Password" style on Firefox?

The TypeScript declaration for `gapi.client.storage` is being overlooked

The function getComputedStyle(elem).getPropertyValue('fontSize') returns incorrect values when the font size of the element is specified in em units

Shining a component (or persona) however essentially duplicate a distinct term

vue.js watch function failing to update

How can one retrieve every element within nested associative arrays?

Dealing with JSON using a YAML parser can result in errors when encountering tab whitespace

Creating an HTML document from JSON data is a straightforward process that involves parsing

Issue with Restangular/angularjs object not refreshing after remove() operation

Learn how to easily read JSON data that has been beautifully formatted in Python

Guide to building a react-redux application with a Node server as the backend

Retrieving the value of the key from a JSON response

Steps to implementing a function just before a form is submitted

Tips on getting the bot to react to a single "event" mentioned in the sentence, without multiple occurrences

ng-init assign value to a new object

Angularjs is encountering an issue because there is no 'Access-Control-Allow-Origin' header on the requested resource