Based on type change object to nested array in javascript

Question

How to change nested object to array object by type in javascript.

Based on object key value type if its array/string change the object to array as shown below in javascript

var ob1 = {
  "list": [
    "service",
    "finance",
    "s1.jpg"
  ],
  "info": [
    "details",
    "mail",
    "s2.jpg"
  ]
}

var ob2 = {
   key1: "v1",
   key2: "v2"
}
var result1=this.modifyObject(ob1);
var result2=this.modifyObject(ob2);

function modifyObject(ob){
  const { field, value, id, ...fields } = ob;
  const rest = Object.entries(fields)
  .map(([field, value], id) => ({ field, value, id }));
  const result = [...rest];
  return result;
}

Expected Output,

// object type value is array
[
 {field: "list", value: ["service","finance"], image: "s1.jpg", id:0},
 {field: "info", value: ["details","mail"], image: "s2.jpg", id:1}
]


// object type value is string
[
 {field:"key1", value:"v1", id:0 },
 {field:"key2", value:"v2", id:1 }
]

Answer 1

You can grab the entires of your input object using Object.entries() and map each [key, value] pair to a new object. You can determine what type of object you want to return by checking whether the second value in the [key, value] pair array is an array (ie: checking if the value is an array) by using Array.isArray() . If it is an array, you can set the value to be the array, and the image to be the last element (obtained by using .pop() , if you don't want to modify the original object you can use slice instead). Otherwise, if the element is not an array, you can return an object which has an id property. The id property is based on the index of the object from the mapping function.

See example below:

 const ob1 = { "list": [ "service", "finance", "s1.jpg" ], "info": [ "details", "mail", "s2.jpg" ] }; const ob2 = { key1: "v1", key2: "v2" }; const modifyObject = obj => Object.entries(obj).map(([field, value], id) => Array.isArray(value)? {field, value, image: value.pop()}: {field, value, id} ); const result1 = modifyObject(ob1); const result2 = modifyObject(ob2); console.log(result1); console.log(result2);

Note that this id property is based on the ordering of how Object.entries() obtains the key-value pairs from your object, so it may differ in older browsers (the newest JS spec specifies the ordering of how the [key, value] pairs are obtained using Object.entries, but older browsers may not follow this)

Answer 2

You can use the function Array.prototype.entries along with the function Array.prototype.reduce to build the desired output.

 let ob1 = { "list": [ "service", "finance", "s1.jpg" ], "info": [ "details", "mail", "s2.jpg" ]}, ob2 = { key1: "v1", key2: "v2"}; function modifyObject(obj) { return Object.entries(obj).reduce((r, [field, value], id) => { let [image] = Array.isArray(value)? value.slice(-1): []; let v = Array.isArray(value)? value.slice(0, value.length - 1): value; return r.concat(Object.assign({id, [field]: v}, image? {image}: {})); }, []); } console.log(modifyObject(ob1)); console.log(modifyObject(ob2));