How to break a dynamically created json into multiple parts based on key in react/javascript

Question

I have dynamic json example below:

{
  "fields": {
    "a": {
      "#type": "textfield"
    },
    "d": {
      "#type": "label"
    }, 
    "f": {
      "#type": "email"
    },
    "g": {
      "#type": "phone"
    },
    "j": {
      "#type": "label"
    }
  }
}

based on the key label I need to split it into multiple json parts. Example:

{
  "fields": {
    "a": {
      "#type": "textfield"
    }
}

{
  "fields": {
    "d": {
      "#type": "label"
    }
}

{
  "fields": { 
    "f": {
      "#type": "email"
    },
    "g": {
      "#type": "phone"
    },
}

{
  "fields": {
    "j": {
      "#type": "label"
    },
}

Note: the json structure can be increase or decrease bcaz its a dynamic data

Answer 1

You can do the following using reduce,

obj = {
  "fields": {
    "a": {
      "#type": "textfield"
    },
    "d": {
      "#type": "label"
    }, 
    "f": {
      "#type": "email"
    },
    "g": {
      "#type": "phone"
    },
    "j": {
      "#type": "label"
    }
  }
}

ret = Object.keys(obj.fields).reduce((prev, curr) => {
  breakPointFound = false;
  Object.values(obj.fields[curr]).forEach(item => {
    if(item === 'label') {
      breakPointFound = true;
    }
  })
  if(breakPointFound) {
    prev.push({ fields: {
      [curr]: obj.fields[curr],
    }});
    prev.push({fields: {}});
  } else {
    if(prev.length) {
        prev[prev.length - 1].fields[curr] = obj.fields[curr];  
    }
    else {
      prev.push({fields: { [curr]: obj.fields[curr]}});
    }
  }
  return prev;
}, []);

if(Object.keys(ret[ret.length - 1].fields).length === 0) {
  ret.splice(ret.length -1);
}
console.log(ret);