2

Let's say I have bellow object : 

   var obj = {
         name:'Jone',
         age:'23',
         height:200,
         weight:400,
   }

I want this : 

   var obj1 = {
         name:'Jone',
         age:'23'
   }

   var obj2 = {
         height:200,
         weight:400
   }

Really what I'm looking for is obj.splice('age') meaning that split this object into two object , starting from age as the key.

I know I can loop and do it the hard way, but is there any equivalent easy nice way ?

Also, if there is any Angular2ish way(a hidden utility maybe ? ), would be even better.

EDIT : I don't exactly know what's inside the object , I just know my key is in there .

What I really am doing is I want to loop around an object , but I have an start point and i don't want to loop through all , I want to be able to cut that object and just start the loop from where I need.

    Object.keys(obj).map( function( value , index ) {
       // I'm just looping here to do some stuff , which is not related to the question here.


    } );

Obviously I'm looping over all the keys of this object , but I want to start from age .

I hope this is clear .

EDIT ; I know this is getting a little bit out of the board , but in Angular2 , we have a formModel and we can have multiple controlGroup inside it , I want to basically be able to find the first controlGroup that is invalid , that's it .

Improve this question
10
  • 4
    You sound like you're counting on object properties being in a known order. While there are some circumstances where an order might be predictable, that is not a usual characteristic of properties (they usually don't have an order). So, what you're asking for suggests that the original data structure should be changed or what you're trying to do should be changed. It's kind of like you're saying that a house has a lawn, a roof, a pool and a tree and you'd like to split things after the roof, but things aren't in any specific order - they are just properties. Commented May 19, 2016 at 2:09
  • @jfriend00 , you're absolutely right, but all of this is coming from a form creating in angular2. I want to be able to find the form section that is invalid , so I have to loop through the controls and find the first inValid one. But you're point is correct , maybe I need to find another solution ! Commented May 19, 2016 at 2:13
  • You should use functions that do DOM traversal, not an object. Commented May 19, 2016 at 2:14
  • If this object is coming from a DOM traversal and order is important, then build an array instead of an object or keep track of the actual DOM object so you can traverse in order using the actual DOM. Commented May 19, 2016 at 2:17
  • Why don't you just use the powerful jQuery selectors to select all relevant elements and then you narrow your search to a known element collection ? Commented May 19, 2016 at 2:17

3 Answers 3

Reset to default
1

PLUNKER DEMO

From what I know and understood from your problem,

ControlGroup is an Object and as others have also noted that properties don't have a specific order, and you can't rely on it even if you know that it's in alphabetical order.

I assume that you either write the controlGroups using formBuilder or generate using a loop.

  • If you already have an array of what controlGroups are there going to be, just save them in an array like 

cgs = ['controlGroup1', 'controlGroup2', 'controlGroup3']

in the exact order that you will put them in the template. Now you know what you are looking for.

  • If you don't,
    • You can create an array
    • If you can't, just traverse the the DOM like

let domList = document.querySelectorAll('*[ngControlGroup]');
let cgEls = Array.apply(null, domList);
var cgs = [];  // will store the ordered list of controlGroups

cgEls.forEach((e) => {
 cgs.push(e.attributes.ngControlGroup.value);
})

NOW you know the order, check for thier validity one by one.

Hope it helps.

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

4 Comments

This sounds like a good solution, I'm using form builder , but document.querySelectorAll('[ngControlGroup]') will return empty.
why so ? are you not using nested controlGroups ?
Yes I am , but can't find any ngControlGroup attr in DOM when I'm inspecting
this is how I defined nested controlGroups in template
0

You could do this:

var obj = {
  name: 'Jone',
  age: '23',
  height: 200,
  weight: 400,
}

var obj1 = {}
var obj2 = {}

function splitAtAge(input) {
  var afterAge = 0;
  for (var i in input) {
    if (afterAge) {
      obj2[i] = input[i];
    } else {
      obj1[i] = input[i];
    }

    if (i == "age") {
      afterAge = true;
    }
  }
}


splitAtAge(obj);

It loops through the object and if a property is after "age", it adds it to obj2. Otherwise, it adds it to obj1.

It seems to work every time for me, but I would avoid doing this altogether if I were you because the properties of objects aren't really meant to have an order.

EDIT: I just realized that you are using Angular, with which I am not familiar. However, this pure JS code should still work.

Improve this answer

Comments

0

I know you're looking for a nice, simple solution, but it's really tough to create a new object without mapping over the keys to get the values. If you're open to using some ES6 syntax, the following solution might work for you.

var obj = {
     name:'Jone',
     age:'23',
     height:200,
     weight:400,
}

var newObj = Object.keys(obj)
  .slice(Object.keys(obj).indexOf('age'))
  .reduce((a, c) => Object.assign(a, { [c]: obj[c] }), {})

// newObj = { height: 200, weight: 400 }

With this method, you are at least only looping over the final two keys in the object.

Improve this answer

1 Comment

Like I said , I don't know what's inside , so slice(2) won't be correct

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.