Display the contents of a nested JavaScript object

Question

Display the contents of a nested JavaScript object

I need help creating a custom JavaScript function that will transform an object into a nicely formatted JSON-style string for debugging purposes. My current approach of iterating over object properties does not handle nested objects properly, resulting in [object Object] being displayed. How can I write a short and simple solution to convert nested objects into multiline strings that can be easily printed to the console?

Unfortunately, the JSON.stringify function is not available within my iAd Producer environment. Therefore, I am seeking a compact function that I can simply copy and paste.

For instance:

stringify({ data: { hello: 'world', with: { nested: 'objects' } })

The expected output should be:


{
  "data": {
    "hello": "world",
    "with": {
      "nested": "objects"
    }
  }
}

javascript json

Answer 1

Answer №1

If the JSON methods are not readily available to you, an alternative option is to integrate a library that will provide them:

https://github.com/douglascrockford/JSON-js/blob/master/json2.js

By doing this, you can utilize JSON.stringify(myobj, null, 2) to generate a two space indented JSON output.

One of the key benefits of using such a library is the assurance of thorough testing and consideration for various edge cases.

Answer 2

If the JSON methods are not readily available to you, an alternative option is to integrate a library that will provide them:

https://github.com/douglascrockford/JSON-js/blob/master/json2.js

By doing this, you can utilize JSON.stringify(myobj, null, 2) to generate a two space indented JSON output.

One of the key benefits of using such a library is the assurance of thorough testing and consideration for various edge cases.

Answer 3

Answer №2

If you are in need of a quick debugging solution, one option is to create a basic recursive function that converts the object's contents into a string. Keep in mind that this method may not handle certain data types like Date objects (which will be displayed as [object Date]).

For a more robust and reliable approach that covers all scenarios and ensures valid JSON output suitable for production environments, consider utilizing libraries such as json2.

function stringify(object, indentation) {
  if (typeof indentation === 'undefined') {
    indentation = 0;
  }

  var items = [];

  for (var key in object) {
    if (object.hasOwnProperty(key)) {
      var value;

      switch (typeof object[key]) {
        case 'object':
          var type = Object.prototype.toString.call(object[key]);

          switch (type) {
            case '[object Null]':
              value = 'null';
              break;

            case '[object Array]':
            case '[object Object]':
              value = stringify(object[key], indentation + 2);
              break;

            default:
              value = type;
          }
          break;

        case 'string':
          value = '"' + object[key] + '"'
          break;

        default:
          value = object[key];
      }

      items.push(Array(indentation + 3).join(' ') + '"' + key + '": ' + value);
    }
  }

  return '{\n'
         + items.join(',\n') + '\n'
         + Array(indentation + 1).join(' ') + '}';
}

-

// Example:
console.log(stringify({ data: { hello: 'world', with: { nested: 'objects' } } }));

Answer 4

If you are in need of a quick debugging solution, one option is to create a basic recursive function that converts the object's contents into a string. Keep in mind that this method may not handle certain data types like Date objects (which will be displayed as [object Date]).

For a more robust and reliable approach that covers all scenarios and ensures valid JSON output suitable for production environments, consider utilizing libraries such as json2.

function stringify(object, indentation) {
  if (typeof indentation === 'undefined') {
    indentation = 0;
  }

  var items = [];

  for (var key in object) {
    if (object.hasOwnProperty(key)) {
      var value;

      switch (typeof object[key]) {
        case 'object':
          var type = Object.prototype.toString.call(object[key]);

          switch (type) {
            case '[object Null]':
              value = 'null';
              break;

            case '[object Array]':
            case '[object Object]':
              value = stringify(object[key], indentation + 2);
              break;

            default:
              value = type;
          }
          break;

        case 'string':
          value = '"' + object[key] + '"'
          break;

        default:
          value = object[key];
      }

      items.push(Array(indentation + 3).join(' ') + '"' + key + '": ' + value);
    }
  }

  return '{\n'
         + items.join(',\n') + '\n'
         + Array(indentation + 1).join(' ') + '}';
}

-

// Example:
console.log(stringify({ data: { hello: 'world', with: { nested: 'objects' } } }));

Display the contents of a nested JavaScript object

Answer №1

Answer №2

Similar questions

Node.js/Hapijs - Verify every property and value in JSON object payload without explicitly naming the properties

The Cordova Mobile Package fails to display the Frontend

JSONP callback function enables cross-domain communication by allowing a

How can I access the value of one method within the same class and use it in another method in Ionic?

Total of the Selected Rows

React Redux Loading progress bar for seamless navigation within React Router

What steps do you take to establish a relay connection for pagination in an ORM framework?

React: Issue encountered when updating props from parent component (Error executing removeChild operation)

Addressing the font file path in an SCSS file while utilizing webpack

What are the drawbacks of adding a .js file with Express.js code to an HTML file?

Positioning with Bootstrap CSS libraries

AngularJS: Changes to the model do not automatically reflect in the view

What are some ways to ensure that my gltf loader in three.js operates synchronously?

When attempting to execute the npm install command within Visual Studio Code, an error message is being displayed

The div element on the HTML page is not displaying all of its content

Obtaining a Slug in the Server-Side Layout of a Next.js Component

Prompt triggered within AJAX request

The WebDriver encountered an error while trying to click on an element

Unable to display search results with AJAX in Select2

Utilizing the change function in conjunction with that