JSFiddle - React, Tailwind, and code Playground

by Hari Menon

JavaScript

var items = [{
  id: 1,
  name: 'grandParent_01',
  isNew: false,
  children: [{
    id: 3,
    name: 'parent_01',
    isNew: false,
    children: [{
      id: 5,
      name: 'child_01',
      isNew: false,
      children: [

      ]
    }, {
      id: 6,
      name: 'child_02',
      isNew: false,
      children: [

      ]
    }]
  }, {
    id: 4,
    name: 'parent_02',
    isNew: false,
    children: [{
      id: 7,
      name: 'child_01',
      isNew: false,
      children: []
    }, {
      id: 8,
      name: 'child_02',
      isNew: false,
      children: []
    }, {
      id: 9,
      name: 'child_03',
      isNew: true,
      children: []
    }]
  }]
}, {
  id: 2,
  name: 'grandParent_01',
  isNew: false,
  children: [{
    id: 10,
    name: 'parent_03',
    isNew: false,
    children: [{
      id: 12,
      name: 'child_01',
      isNew: false,
      children: []
    }, {
      id: 13,
      name: 'child_02',
      isNew: false,
      children: []
    }]
  }, {
    id: 11,
    name: 'parent_02',
    isNew: false,
    children: [{
      id: 14,
      name: 'child_01',
      isNew: false,
      children: []
    }, {
      id: 15,
      name: 'child_02',
      isNew: false,
      children: []
    }, {
      id: 16,
      name: 'child_03',
      isNew: false,
      children: []
    }]
  }]
}];

var flatten = function(array) {
	var result = [];
  array.forEach(a => {
  	result.push(a);
    if (Array.isArray(a.children)) {
    	result = result.concat(flatten(a.children));
    }
  })
  return result;
};

var flat = flatten(items).sort((a, b) => a.id - b.id );

console.dir(flat);