condensing the array object recursively in javascript

Question

I have an array of objects in the below format:

{
  "country": "India",
  "children": [
    {
      "name": "Karnataka",
      "type": "State",
      "children": [
        {
          "name": "",
          "type": "city"
        },
        {
          "name": "Bangalore",
          "type": "city"
        },
        {
          "name": "Mangalore",
          "type": "city"
        }
      ]
    },
    {
      "name": "Kerala",
      "type": "State",
      "children": [
        {
          "name": "",
          "type": "city"
        }
      ]
    },
    {
      "name": "Maharashtra",
      "type": "State",
      "children": [
        {
          "name": "Mumbai",
          "type": "city"
        },
        {
          "name": "Pune",
          "type": "city"
        }
      ]
    }
  ]
}

Every object has a children element which contains the details of the element. I need to recursively iterate through the ~~json~~ object and remove all the nodes whose name is empty string up till the root. For the above json format, the output should be like below:

{
  "country": "India",
  "children": [
    {
      "name": "Karnataka",
      "type": "State",
      "children": [
        {
          "name": "Bangalore",
          "type": "city"
        },
        {
          "name": "Mangalore",
          "type": "city"
        }
      ]
    },
    {
      "name": "Kerala",
      "type": "State",
      "children": [
      ]
    },
    {
      "name": "Maharastra",
      "type": "State",
      "children": [
        {
          "name": "Mumbai",
          "type": "city"
        },
        {
          "name": "Pune",
          "type": "city"
        }
      ]
    }
  ]
}

How to do this in javascript recursively using Underscorejs.

@RayonDabre—seems to me reduceRight and delete unwanted members is better, but does underscore.js have that? If not there's the built–in one. — RobG
– RobG, Commented Apr 6, 2016 at 6:48
I don't know how important it is for you to preserve the original data object but if you go array functions way you will probably lose it unless you clone the object in the first place by some means. — Redu
– Redu, Commented Apr 6, 2016 at 10:34

Nina Scholz · Accepted Answer · 2016-04-06 07:11:06Z

3

This is a recursive solution with Array#filter().

function filterName(a) {
    if (a.name) {
        if (Array.isArray(a.children)) {
            a.children = a.children.filter(filterName);
        }
        return true;
    }
}

var object = { "country": "India", "children": [{ "name": "Karnataka", "type": "State", "children": [{ "name": "", "type": "city" }, { "name": "Bangalore", "type": "city" }, { "name": "Mangalore", "type": "city" }] }, { "name": "Kerala", "type": "State", "children": [{ "name": "", "type": "city" }] }, { "name": "Maharashtra", "type": "State", "children": [{ "name": "Mumbai", "type": "city" }, { "name": "Pune", "type": "city" }] }] };

object.children.forEach(filterName);
document.write("<pre>" + JSON.stringify(object, 0, 4) + "</pre>");

answered Apr 6, 2016 at 7:11

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derlin · Accepted Answer · 2016-04-06 07:03:22Z

1

Try this:

function condense(arr) {

  arr.children = arr.children.map(function(c) {
    c.children = c.children.filter(function(c1) {
      return c1.name;
    });
    return c;
  });

  return arr;
}

I iterate through the children (with map), then filter the children array with filter. Only the children with a name not null or empty will be kept.

Here is a jsfiddle.

edited Apr 6, 2016 at 7:03

answered Apr 6, 2016 at 6:58

Derlin

9,9112 gold badges34 silver badges57 bronze badges

2 Comments

zilcuanu Over a year ago

I tried similar approach. I wanted to attempt this with recursion.

Derlin Over a year ago

Why ? You only have two depth levels. Furthermore, at the first level, you keep empty children, on the second one you delete them. It does not seem like a good recursion candidate.

RobG · Accepted Answer · 2016-04-06 07:06:27Z

1

Not au fait with underscore.js. You can do this with ES5 reduceRight and delete members that you don't want, it should be more efficient than other approaches. The following uses recursion (which isn't as efficient as serial processing but is likely less code), so you can nest the objects as deep as you like:

function removeEmpty(obj) {
  obj.children.reduceRight(function (acc, child, i) {
    if (!child.name) {
      obj.children.splice(i, 1);
    } else if (child.children) {
      removeEmpty(child);
    }
    return null;
  }, null);
  return obj;
}

// Test
var data = {
  "country": "India",
  "children": [
    {
      "name": "Karnataka",
      "type": "State",
      "children": [
        {
          "name": "",
          "type": "city"
        },
        {
          "name": "Bangalore",
          "type": "city"
        },
        {
          "name": "Mangalore",
          "type": "city"
        }
      ]
    },
    {
      "name": "Kerala",
      "type": "State",
      "children": [
        {
          "name": "",
          "type": "city"
        }
      ]
    },
    {
      "name": "Maharashtra",
      "type": "State",
      "children": [
        {
          "name": "Mumbai",
          "type": "city"
        },
        {
          "name": "Pune",
          "type": "city"
        }
      ]
    }
  ]
}


document.write('Original:<br>' + JSON.stringify(data) + '<br><br>' +
               'Modified:<br>' + JSON.stringify(removeEmpty(data)));

answered Apr 6, 2016 at 7:06

RobG

148k32 gold badges180 silver badges216 bronze badges

3 Comments

Bergi Over a year ago

Oh, the usage of reduceRight is so confusing here, as you're not reducing anything…

RobG Over a year ago

Yes, it's just to iterate from length to 0, the accumulator is ignored. Perhaps there should be a forEachRight? ;-) Thinking about it now, the return null can be omitted.

Bergi Over a year ago

Maybe also _ instead of acc

Angad · Accepted Answer · 2016-04-06 07:19:09Z

This is very specific to your example.

Link to fiddle

var obj = {
  "country": "India",
  "children": [{
    "name": "Karnataka",
    "type": "State",
    "children": [{
      "name": "",
      "type": "city"
    }, {
      "name": "Bangalore",
      "type": "city"
    }, {
      "name": "Mangalore",
      "type": "city"
    }]
  }, {
    "name": "Kerala",
    "type": "State",
    "children": [{
      "name": "",
      "type": "city"
    }]
  }, {
    "name": "Maharashtra",
    "type": "State",
    "children": [{
      "name": "Mumbai",
      "type": "city"
    }, {
      "name": "Pune",
      "type": "city"
    }]
  }]
};

//Before
document.write("BEFORE: "+JSON.stringify(obj));
//After
document.write("AFTER: "+JSON.stringify(checkJSON(obj)));

function checkJSON(obj) {
  $.each(obj.children, function(index, value) {
    if ($.isArray(value.children)) {
      $.each(value.children, function(index, value) {
        if (value.name == '') {
          delete value.name;
        }
      });
    }
  });
  return obj;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Pimmol · Accepted Answer · 2016-04-06 08:15:14Z

1

Probably not the shortest way, but it works:

obj.children = _.each(obj.children, filter);

function filter(child, index, arr) {
  if (child && child.name === '') {
    // remove the ones without name
    arr.splice(index, 1);

  } else if (_.has(child, 'children')) {
    // remove nested children
    child.children = _.each(child.children, filter);

    // check for empty children array and remove it (if needed)
    /*
    if (child.children.length === 0) {
      delete child['children'];
    }
    */
  }

  return child;
}

Fiddle: https://jsfiddle.net/gnmosu5p/2/

answered Apr 6, 2016 at 8:15

Pimmol

1,8911 gold badge10 silver badges14 bronze badges

Comments

Redu · Accepted Answer · 2016-04-06 10:36:45Z

1

I know a recursive approach is asked but i can't help myself from giving a single liner here.

var newData = JSON.parse(JSON.stringify(data).replace(/{"name":"".+?},?/g, ""));

where data is the initially given object to be restructured.

It's somewhat slower than array functions but one advantage of this method is preserving the original data object as it is while all array methods will override the original data object unless you clone it.

edited Apr 6, 2016 at 10:36

answered Apr 6, 2016 at 9:05

Redu

26.3k6 gold badges61 silver badges84 bronze badges

Collectives™ on Stack Overflow

condensing the array object recursively in javascript

6 Answers 6

Comments

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related