How to update a json object request string values to NUMBER in REACT

Question

I have an json object array and I want to update the values from String to Number

Example JSON object

[
   {
      "atest":{
         "value":"0",
         "units":"sqft"
      },
      "etest":{
         "value":"70",
         "units":"inches"
      },
      "waveTest":"8",
      "db_test":{
         "value":"3.7",
         "units":"feet"
      },
      "erp_test":{
         "value":"0.97",
         "units":"feet"
      },
      "erfp_test":"5"
   },
   {
      "atest":{
         "value":"6",
         "units":"sqft"
      },
      "etest":{
         "value":"20",
         "units":"inches"
      },
      "waveTest":"2",
      "db_test":{
         "value":"8.6",
         "units":"feet"
      },
      "erp_test":{
         "value":"2.57",
         "units":"feet"
      },
      "erfp_test":"10"
   }
]

I want to update all the "value": "0" to "value": 0 Please let me know what steps I need to mutate the json object to be able to update every data after "value" to a NUMBER

I seen a simliar post (reference) but his data schema is different compared to mine.

Reference

What you need is a recursive function that deep replaces/updates each occurence of "value" key using parseInt to convert to number. Here is a solution for a similar [problem](https://stackoverflow.com/questions/49907772/how-to-change-the-value-of-an-object-in-all-levels-of-keys/49908199) — Alex, Jan 12 '21 at 14:02

Jun · Accepted Answer · 2021-01-12T14:16:03.803

Here is the solution. I added comments to the code for understanding.

// original array
const arr = [
   {
      "atest":{
         "value":"0",
         "units":"sqft"
      },
      "etest":{
         "value":"70",
         "units":"inches"
      },
      "waveTest":"8",
      "db_test":{
         "value":"3.7",
         "units":"feet"
      },
      "erp_test":{
         "value":"0.97",
         "units":"feet"
      },
      "erfp_test":"5"
   },
   {
      "atest":{
         "value":"6",
         "units":"sqft"
      },
      "etest":{
         "value":"20",
         "units":"inches"
      },
      "waveTest":"2",
      "db_test":{
         "value":"8.6",
         "units":"feet"
      },
      "erp_test":{
         "value":"2.57",
         "units":"feet"
      },
      "erfp_test":"10"
   }
]

const newArr = arr.map(element => {
  // Object.keys get keys from object by array so you can loop by keys
  Object.keys(element).forEach(key => {
    // check value is exist and parse value string to int
    if (element[key].value) element[key].value = parseFloat(element[key].value)
  })
  // return parsed object to array
  return element
})

console.log(newArr)

score 0 · Answer 2 · answered Jan 12 '21 at 14:20

Try this update with Function or onClick

data = [
   {
      "atest":{
         "value":"0",
         "units":"sqft"
      },
      "etest":{
         "value":"70",
         "units":"inches"
      },
      "waveTest":"8",
      "db_test":{
         "value":"3.7",
         "units":"feet"
      },
      "erp_test":{
         "value":"0.97",
         "units":"feet"
      },
      "erfp_test":"5"
   },
   {
      "atest":{
         "value":"6",
         "units":"sqft"
      },
      "etest":{
         "value":"20",
         "units":"inches"
      },
      "waveTest":"2",
      "db_test":{
         "value":"8.6",
         "units":"feet"
      },
      "erp_test":{
         "value":"2.57",
         "units":"feet"
      },
      "erfp_test":"10"
   }
]
updateData=(index,name,UpdateValue,target)=>{
//index means acces to object 0,1 or etc
//name means target the this object you want to update value
//UpdateValue is new value
//target means which variable you want to update

data[index][name][target] = UpdateValue
}

//example
////example
data.map((items,index)=>(Object.keys(items).map(item=>
updateData(index,item,Math.random(),'value')
)))

console.log(data,'New')

score 0 · Answer 3 · answered Jan 12 '21 at 14:21

0

if the structure of your objects are always the same its as simple as that:

for(let el of arr) 
   for(let key in elem) 
      if(el[key].value) el[key].value = parseFloat(el[key].value)

answered Jan 12 '21 at 14:21

Mehdi Belbal

523
3
7

How to update a json object request string values to NUMBER in REACT

3 Answers3