How can you transform square bracket object keys from a URL address into a nested object using Javascript?

Question

How can you transform square bracket object keys from a URL address into a nested object using Javascript?

Considering the following:

var obj = { "object[foo][bar][ya]": 100 };

Is there a way to achieve this structure:

var obj = { object: { foo: { bar: { ya: 100 }}}};

javascript angularjs url

Answer 1

Answer №1

Step-by-step method

Begin by splitting the provided string using brackets, then proceed to create a nested object by iterating through the resulting tokens:

Initial String

var obj = { "object[foo][bar][ya]": 100 };

Split the string to obtain

var tokens = Object.keys(obj)[0]
    .split('[')
    .map(function(s){return s.replace(']','')});
    // tokens = [ 'object', 'foo', 'bar', 'ya' ]

Next, construct the nested object, starting from the innermost level

var result = {};
tokens.reverse().forEach(function(key){
    if (Object.keys(result).length==0){
        result[key] = obj[Object.keys(obj)[0]]; // inner-most key-value
    }
    else{
        var temp = {};
        temp[key] = result;
        result = temp;
    }
});

Final Output

{"object":{"foo":{"bar":{"ya":100}}}}

Answer 2

Step-by-step method

Begin by splitting the provided string using brackets, then proceed to create a nested object by iterating through the resulting tokens:

Initial String

var obj = { "object[foo][bar][ya]": 100 };

Split the string to obtain

var tokens = Object.keys(obj)[0]
    .split('[')
    .map(function(s){return s.replace(']','')});
    // tokens = [ 'object', 'foo', 'bar', 'ya' ]

Next, construct the nested object, starting from the innermost level

var result = {};
tokens.reverse().forEach(function(key){
    if (Object.keys(result).length==0){
        result[key] = obj[Object.keys(obj)[0]]; // inner-most key-value
    }
    else{
        var temp = {};
        temp[key] = result;
        result = temp;
    }
});

Final Output

{"object":{"foo":{"bar":{"ya":100}}}}

Answer 3

Answer №2

JavaScript does not have built-in functionality for parsing nested objects in query strings.

One recommended tool for this task is , which is highly effective.

console.log(URI.parseQuery("?&foo=bar&&foo=bar&foo=baz&"));

If you prefer not to import the entire library, you can use just the query string parsing part (credit to https://github.com/medialize/URI.js):

var URI = {
  decodeQuery: function(string, escapeQuerySpace) {
    string += '';

    try {
      return decodeURIComponent(escapeQuerySpace ? string.replace(/\+/g, '%20') : string);
    } catch(e) {
      // Handling unforeseen encodings, returning the original string
      return string;
    }
  },
  parseQuery: function(string, escapeQuerySpace) {
    if (!string) {
      return {};
    }

    // Cleaning up the query string
    string = string.replace(/&+/g, '&').replace(/^\?*&*|&+$/g, '');

    if (!string) {
      return {};
    }

    var items = {};
    var splits = string.split('&');
    var length = splits.length;
    var v, name, value;

    for (var i = 0; i < length; i++) {
      v = splits[i].split('=');
      name = URI.decodeQuery(v.shift(), escapeQuerySpace);
      value = v.length ? URI.decodeQuery(v.join('='), escapeQuerySpace) : null;

      if (Object.prototype.hasOwnProperty.call(items, name)) {
        if (typeof items[name] === 'string') {
          items[name] = [items[name]];
        }

        items[name].push(value);
      } else {
        items[name] = value;
      }
    }

    return items;
  }
};

Answer 4

JavaScript does not have built-in functionality for parsing nested objects in query strings.

One recommended tool for this task is , which is highly effective.

console.log(URI.parseQuery("?&foo=bar&&foo=bar&foo=baz&"));

If you prefer not to import the entire library, you can use just the query string parsing part (credit to https://github.com/medialize/URI.js):

var URI = {
  decodeQuery: function(string, escapeQuerySpace) {
    string += '';

    try {
      return decodeURIComponent(escapeQuerySpace ? string.replace(/\+/g, '%20') : string);
    } catch(e) {
      // Handling unforeseen encodings, returning the original string
      return string;
    }
  },
  parseQuery: function(string, escapeQuerySpace) {
    if (!string) {
      return {};
    }

    // Cleaning up the query string
    string = string.replace(/&+/g, '&').replace(/^\?*&*|&+$/g, '');

    if (!string) {
      return {};
    }

    var items = {};
    var splits = string.split('&');
    var length = splits.length;
    var v, name, value;

    for (var i = 0; i < length; i++) {
      v = splits[i].split('=');
      name = URI.decodeQuery(v.shift(), escapeQuerySpace);
      value = v.length ? URI.decodeQuery(v.join('='), escapeQuerySpace) : null;

      if (Object.prototype.hasOwnProperty.call(items, name)) {
        if (typeof items[name] === 'string') {
          items[name] = [items[name]];
        }

        items[name].push(value);
      } else {
        items[name] = value;
      }
    }

    return items;
  }
};

Answer 5

Answer №3

If you source the necessary components, you have the option to construct a novel item.

const obj = {
    "object[foo][bar][ya]": 100,
    "object[foo][baz]": 200,
    "object[foo][bar][bar]": 50,
    "xy": 30
};

let newObj = {};

for (const i in obj) {
    let a = i.match(/([^\[\]]+)(\[[^\[\]]+[^\]])*?/g),
        p = obj[i];
        j = a.length;

    while (j--) {
        q = {};
        q[a[j]] = p;
        p = q;
    }
    // merge object
    let k = Object.keys(p)[0],
        o = newObj;

    while (k in o) {
        p = p[k];
        o = o[k];
        k = Object.keys(p)[0];
    }

    o[k] = p[k];
}

console.log(newObj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 6

If you source the necessary components, you have the option to construct a novel item.

const obj = {
    "object[foo][bar][ya]": 100,
    "object[foo][baz]": 200,
    "object[foo][bar][bar]": 50,
    "xy": 30
};

let newObj = {};

for (const i in obj) {
    let a = i.match(/([^\[\]]+)(\[[^\[\]]+[^\]])*?/g),
        p = obj[i];
        j = a.length;

    while (j--) {
        q = {};
        q[a[j]] = p;
        p = q;
    }
    // merge object
    let k = Object.keys(p)[0],
        o = newObj;

    while (k in o) {
        p = p[k];
        o = o[k];
        k = Object.keys(p)[0];
    }

    o[k] = p[k];
}

console.log(newObj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 7

Answer №4

Presented below is an ES6 version of the code. Please note that it has not been thoroughly tested for all possible scenarios.

const keyPattern = /^(\w+)\[(\w+)\](.*)$/;

export function decodeParams(params) {
  return Object.keys(params).reduce((result, key) => {
    let match = key.match(keyPattern);

    if (match && match.length >= 3) {
      let [key, nextKey, rest = ''] = match.slice(1);

      result[key] = Object.assign(
        {},
        result[key],
        decodeParams({ [nextKey + rest]: params[key] })
      );
    } else {
      result[key] = params[key];
    }

    return result;
  }, {});
}

Answer 8

Presented below is an ES6 version of the code. Please note that it has not been thoroughly tested for all possible scenarios.

const keyPattern = /^(\w+)\[(\w+)\](.*)$/;

export function decodeParams(params) {
  return Object.keys(params).reduce((result, key) => {
    let match = key.match(keyPattern);

    if (match && match.length >= 3) {
      let [key, nextKey, rest = ''] = match.slice(1);

      result[key] = Object.assign(
        {},
        result[key],
        decodeParams({ [nextKey + rest]: params[key] })
      );
    } else {
      result[key] = params[key];
    }

    return result;
  }, {});
}

How can you transform square bracket object keys from a URL address into a nested object using Javascript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Discover the process of attaching an event to the keyboard display within a Cordova application

Retrieve the jquery.data() of an element stored in an HTML file using JavaScript or jQuery

Guide to effectively invoking JavaScript functions using jQuery

List the properties that the arguments object supports

Service injection results in an error

The frequency of database updates exceeds expectations - involving vue.js this.$router.push and express operations

Utilizing the zIndex property on a map label does not produce any impact when combined with a GeoJSON layer

The directive code takes precedence over the controller code and is executed first

Only initiate an AJAX call if there are no other pending AJAX requests from prior function invocations

Can a complete form be encapsulated within a single AngularJS directive?

What is causing my tooltips to flicker in Firefox but not in Chrome?

What is a method to mimic the presence of JavaScript using PHP Curl?

Having difficulty attaching events to Bootstrap 3 button radios in button.js

An effective method for creating responsive layouts for custom-shaped HTML elements in a board game

Is there a way to export the HTML table content to an Excel sheet that is compatible with browsers such as Internet Explorer, Mozilla Firefox, and others?

Reveal unseen information on the webpage upon clicking a link

Configuring download destination in WebDriver with JavaScript

Troubleshooting Knockout.JS: Why self.myObservable is not working and the importance of code organization

Difficulty encountered in resetting progress bar post ajax form submission

Is there a more efficient method to execute this AJAX request?