Tree view for Arrays and Objects in JavaScript
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.
- 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
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))
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.
- 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
