Tree view for Arrays and Objects in JavaScript

Manish Mandal
Nov 17 · 3 min read
Image for post
Image for post

Do you use conosle.log() or console.table() to print your arrays and objects in a JavaScript project? Yes, we all use that but the way I have to open multidimensional arrays or objects in the console is kinda boring to me. I use an npm library to view all my arrays and object in a tree-like structure. This way I can clearly see all my arrays with the index and also the hierarchy of my objects. So let us see in this tutorial how to use that library for our next JavaScript project.

This tutorial assumes that you're creating your next JavaScript project using npm packages. For example, nodejs, React, Angular, Vue, WebPack, gulp, parcel, etc.

  1. We will start by creating a simple node project. Open the project directory and run the below command to initialize our project and setup necessary files.
npm init -y#or yarn init -y 

2. Now create an index.js file inside that directory.

3. Now install treeify to your project.

npm install treeify#oryarn add treeify

4. Open your index.js file and import treeify to your project.

const treeify = require('treeify');#or import treeify from 'treeify'

5. For demonstration purposes we will create a multidimensional array and object. Paste the below code in your index.js file

6. Now to print that array or object in a tree-like structure we need to pass our array or object like this.console.log(treeify.asTree(arrayOrObject, true)) . For now, I’ll only print an array.

console.log(treeify.asTree(array, true))

7. Now run node index.js to check the result

Image for post
Image for post
Terminal Output
Image for post
Image for post
Browser output for other projects

Still, it’s boring to view without color. 😐

We will use another library to view that structure in different colors.

8. Now we will install another package that will help to view the structure in a different color. So run the below command to install that package

npm install ololog#or yarn add ololog

9. Import that library

const log = require ('ololog').configure({time:false, locate:false});#or import ololog from 'ololog'; 
const log = ololog.configure({locate:false, time:false});

10. Now instead of using console.log() use log.green(treeify.asTree(arrayOrObject, true)) to view the structure in green color.

log.green(treeify.asTree(array, true))
Image for post
Image for post
Terminal Output
Image for post
Image for post
Bowser Tree output for other projects

Ok fine now we know a way to view our array and object in a tree-like structure but do we always have to import all those libraries for a simple array and object view for each file? This isn’t a solution this is a mess 😂. So let us create a simple function which we will then export and import to the file we want to use.

  1. Create another directory inside your project with the name utils and inside that directory create a file with the name treeView.js and paste the below code.

This will create a default function with the name treeView which you can then import to any file to view array and object in a tree-like structure.

2. Now import the treeView function to your index.js file and pass your array inside that function.

//import
import treeView from './utils/treeView.js'
//passing array to function
treeView(array)

Hope you will like this tutorial. Below I have shared my project GitHub Repository for your reference.

Keep Reading

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store