How do I format objects in javascript and add new fields to it dynamically?

Question

I have an student object with different fields.I need to format each of this object with data and the type of the data Below is the object

const data=[
            {
                "ID": 1,
                "NAME": "SAM",
                "GRADE": "1st GRADE",
                "AGE": ,
                "PERCENTAGE": 96.25,
                
            },
            {
                "ID": 2,
                "NAME": "JULIAN",
                "GRADE": "3rd GRADE",
                "AGE": ,
                "PERCENTAGE": 90.33,
                
            },
            {
                "ID": 3,
                "NAME": "PETER",
                "GRADE": "1st GRADE",
                "AGE": ,
                "PERCENTAGE": 91.23,
                
            }
    ]

Goal is that individual object should be associated with data and type. Expected format is as below

[           {
                "ID": {data:1,type:number},
                "NAME": {data:"SAM",type:string},
                "GRADE": {data:"1st GRADE",type:string},
                "AGE": {data:,type:number}
                "PERCENTAGE": {data:96.25,type:number},
                
            },
    {
                "ID": {data:2,type:number},
                "NAME": {data:"JULIAN",type:string},
                "GRADE": {data:"3rd GRADE",type:string},
                "AGE": {data:,type:number}
                "PERCENTAGE": {data:90.33,type:number}
                
            },
            {
                "ID": {data:3,type:number},
                "NAME": {data:"PETER",type:string},
                "GRADE": {data:"1st GRADE",type:string},
                "AGE": {data:,type:number}
                "PERCENTAGE": {data:91.23,type:number}
                
            }
    ]

EDIT 1:I want to group by the data on the field id. Expected output should be

[
"1":       [{
                "ID": {data:1,type:number},
                "NAME": {data:"SAM",type:string},
                "GRADE": {data:"1st GRADE",type:string},
                "AGE": {data:,type:number}
                "PERCENTAGE": {data:96.25,type:number},
                
            }],
            "2":[
            {
                "ID": {data:2,type:number},
                "NAME": {data:"JULIAN",type:string},
                "GRADE": {data:"3rd GRADE",type:string},
                "AGE": {data:,type:number}
                "PERCENTAGE": {data:90.33,type:number}
                
            }],
            "3":[
            {
                "ID": {data:3,type:number},
                "NAME": {data:"PETER",type:string},
                "GRADE": {data:"1st GRADE",type:string},
                "AGE": {data:,type:number}
                "PERCENTAGE": {data:91.23,type:number}
                
            }
            ]
    ]

I tried using

var outObject = data.reduce(function (a, e) {

      let estKey = (e[ID.data]);

      (a[estKey] ? a[estKey] : (a[estKey] = null || [])).push(e);
      return a;
    }, {});

    return outObject

  }

But the groupby isn't happening

Your AGE example isn't correct. "" is not a number. It's also impossible to infer the type from that. — Cerbrus
– Cerbrus, Commented Jul 6, 2021 at 9:36
corrected the format...am relatively new to javascript...can we hardcode it like if the field is age the type should be number? — kameswari
– kameswari, Commented Jul 6, 2021 at 9:39
Of course you can hardcode it, but realistically, you probably shouldn't be having empty values — Cerbrus
– Cerbrus, Commented Jul 6, 2021 at 9:41
Your current javascript is invalid, you would get the error Uncaught SyntaxError: Unexpected token ','" as it needs to have something after AGE: and before the ,. Any of the examples here will do: jsfiddle.net/5t18L0jo — Jamiec
– Jamiec, Commented Jul 6, 2021 at 9:45

mickl · Accepted Answer · 2021-07-06 10:06:27Z

1

You can use Object.entries to get your object as an array of keys and values and then use array.reduce to build a new object:

const data = [
    { "ID": 1, "NAME": "SAM", "GRADE": "1st GRADE", "AGE": 2, "PERCENTAGE": 96.25  },
    { "ID": 2, "NAME": "JULIAN", "GRADE": "3rd GRADE", "AGE": 2, "PERCENTAGE": 90.33  } ,
    { "ID": 3, "NAME": "PETER", "GRADE": "1st GRADE", "AGE": 2, "PERCENTAGE": 91.23  }
];
    
 let result = data.map((obj) => Object.entries(obj).reduce((acc, item) => {
       [key, value] = item;
       acc[key] = { data: value, type: typeof value }
       return acc;
    }, {}
 ))
 
 console.log(result)

EDIT: to group your data by Id you can also use array.reduce:

const data = [
    { "ID": 1, "NAME": "SAM", "GRADE": "1st GRADE", "AGE": 2, "PERCENTAGE": 96.25  },
    { "ID": 2, "NAME": "JULIAN", "GRADE": "3rd GRADE", "AGE": 2, "PERCENTAGE": 90.33  } ,
    { "ID": 3, "NAME": "PETER", "GRADE": "1st GRADE", "AGE": 2, "PERCENTAGE": 91.23  }
];
    
 let result = data.reduce(
     (acc, obj) => {
         newObj = Object.entries(obj).reduce((acc, item) => {
                    [key, value] = item;
                    acc[key] = { data: value, type: typeof value }
                    return acc;
                    }, {})

        if(acc[obj.ID]){
            acc[obj.ID].push(newObj);
        } else{
            acc[obj.ID] = [newObj];
        }
            
        return acc;
     }, {})
     
 console.log(result);

edited Jul 6, 2021 at 10:06

answered Jul 6, 2021 at 9:39

mickl

50.1k9 gold badges71 silver badges99 bronze badges

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

2 Comments

kameswari Over a year ago

I just edited the question...can you look at it?

mickl Over a year ago

@kameswari modified my answer

Cerbrus · Accepted Answer · 2021-07-06 09:39:40Z

1

It's pretty simple to do if you iterate over your data and the fields in there:

const data = [
    { "ID": 1, "NAME": "SAM", "GRADE": "1st GRADE", "AGE": 30, "PERCENTAGE": 96.25  },
    { "ID": 2, "NAME": "JULIAN", "GRADE": "3rd GRADE", "AGE": 12, "PERCENTAGE": 90.33  } ,
    { "ID": 3, "NAME": "PETER", "GRADE": "1st GRADE", "AGE": 46, "PERCENTAGE": 91.23  }
];

data.forEach(person => {
  Object.keys(person).forEach(key => {
    person[key] = {
      data: person[key],
      type: typeof person[key]
    }
  });
});

console.log(data)

answered Jul 6, 2021 at 9:39

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Comments

Cerbrus · Accepted Answer · 2021-07-06 09:43:46Z

You can do this by using a map and typeof

const data = [
    { "ID": 1, "NAME": "SAM", "GRADE": "1st GRADE", "AGE": 18, "PERCENTAGE": 96.25  },
    { "ID": 2, "NAME": "JULIAN", "GRADE": "3rd GRADE", "AGE": 18, "PERCENTAGE": 90.33  } ,
    { "ID": 3, "NAME": "PETER", "GRADE": "1st GRADE", "AGE": 18, "PERCENTAGE": 91.23  }
];


const result = data.map(obj => {
  return Object.fromEntries(
    Object.entries(obj)
    .map(([key, value]) => ([key, {
      data: value,
      type: typeof value
    }]))

  )
});


console.log(result);

You'll note that I have put numbers in for AGE as you cant have a completely empty value.

If you wanted a special case for AGE you would need to do something like this:

const data = [
    { "ID": 1, "NAME": "SAM", "GRADE": "1st GRADE", "AGE": "", "PERCENTAGE": 96.25  },
    { "ID": 2, "NAME": "JULIAN", "GRADE": "3rd GRADE", "AGE": "", "PERCENTAGE": 90.33  } ,
    { "ID": 3, "NAME": "PETER", "GRADE": "1st GRADE", "AGE": "", "PERCENTAGE": 91.23  }
];


const result = data.map(obj => {
  return Object.fromEntries(
    Object.entries(obj)
    .map(([key, value]) => ([key, {
      data: value,
      type: key === "AGE" ? "number" : typeof value
    }]))

  )
});


console.log(result);

Azhar Zafar · Accepted Answer · 2021-07-06 10:13:30Z

1

You can use the Array.map() method on data array.

const data = [
{ "ID": 1, "NAME": "SAM", "GRADE": "1st GRADE", "AGE": "", "PERCENTAGE": 96.25  },
{ "ID": 2, "NAME": "JULIAN", "GRADE": "3rd GRADE", "AGE": "", "PERCENTAGE": 90.33  } ,
{ "ID": 3, "NAME": "PETER", "GRADE": "1st GRADE", "AGE": "", "PERCENTAGE": 91.23  }
]

const mapped = data.map((item) => {
  let obj = {};
  for (const key of Object.keys(item)) {
    obj[key] = { data: item[key], type: typeof item[key] };
  }
  return obj;
});

console.log(mapped);

edited Jul 6, 2021 at 10:13

answered Jul 6, 2021 at 9:47

Azhar Zafar

1,7421 gold badge12 silver badges13 bronze badges

Collectives™ on Stack Overflow

How do I format objects in javascript and add new fields to it dynamically?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related