Need to know how to use the spread operator for an object

Question

I have a reactJS application and would like to know if there was an easier way to assign my state object to the data being returned from a rest. Perhaps using a spread operator?

state = {
        recordid: "",
        companyname: {val:"",err:""},
        address: {val:"",err:""},
        telephone: {val:[],err:""},
        email: {val:[],err:""},
        taxid: {val:"",err:""},
        weburl: {val:"",err:""},
        loading: true
    }

The data coming back from the server looks like this:

{
  "address": "9242 Kropf Court\nTulsa, OK 74133", 
  "balance": "1937.2400", 
  "companyname": "HUB Pharmaceuticals, LLC", 
  "email": [
    {
      "emailaddress": "lespinha4r@salon.com", 
      "emailname": "Lizbeth Espinha", 
      "recordid": "ea18a1b3-860d-45ed-a6bc-b5208dcfbac7"
    }
  ], 
  "recordid": "fe435915-0e5c-4165-80ca-28c69a5d1ed8", 
  "taxid": "132798707", 
  "telephone": [
    {
      "phonename": "Office", 
      "phonenumber": "9185499797", 
      "recorder": 1, 
      "recordid": "9fd70f31-b450-465b-aec4-39f47ec6e883"
    }
  ], 
  "weburl": "https://delicious.com"
}

It is my intention to assign the values coming back from the RESTapi to the matching state variable but in the corresponding "val" variables. Can this be done with the spread operator?

Answer 1

Its not pretty but you can use object destructuring to get the properties you're interested in:

 const parseResponseObject = ({ recordid, companyname, address, telephone, email, taxid, weburl, }) => ({ recordid, companyname: { val: companyname, err: '' }, address: { val: address, err: '' }, telephone: { val: telephone, err: '' }, email: { val: email, err: '' }, taxid: { val: taxid, err: '' }, weburl: { val: weburl, err: '' }, loading: true, }) const response = { address: '9242 Kropf Court\\nTulsa, OK 74133', balance: '1937.2400', companyname: 'HUB Pharmaceuticals, LLC', email: [ { emailaddress: 'lespinha4r@salon.com', emailname: 'Lizbeth Espinha', recordid: 'ea18a1b3-860d-45ed-a6bc-b5208dcfbac7', }, ], recordid: 'fe435915-0e5c-4165-80ca-28c69a5d1ed8', taxid: '132798707', telephone: [ { phonename: 'Office', phonenumber: '9185499797', recorder: 1, recordid: '9fd70f31-b450-465b-aec4-39f47ec6e883', }, ], weburl: 'https://delicious.com', } const result = parseResponseObject(response) console.log(result)

---

Or, you can use Object.entries() along with Array.prototype.reduce() . But this will turn each property to the { val, err } format and it looks like your not doing that to the recordid prop and dropping the balance prop.

const parseResponseObject = response =>
  Object.entries(response).reduce((obj, [k, v]) => ({
    ...obj,
    [k]: { val: v, err: '' },
  }), {})

Answer 2

Does this help?

 const data = { "address": "9242 Kropf Court\\nTulsa, OK 74133", "balance": "1937.2400", "companyname": "HUB Pharmaceuticals, LLC", "email": [{ "emailaddress": "lespinha4r@salon.com", "emailname": "Lizbeth Espinha", "recordid": "ea18a1b3-860d-45ed-a6bc-b5208dcfbac7" }], "recordid": "fe435915-0e5c-4165-80ca-28c69a5d1ed8", "taxid": "132798707", "telephone": [{ "phonename": "Office", "phonenumber": "9185499797", "recorder": 1, "recordid": "9fd70f31-b450-465b-aec4-39f47ec6e883" }], "weburl": "https://delicious.com" } const state = { recordid: "", companyname: { val: "", err: "" }, address: { val: "", err: "" }, telephone: { val: [], err: "" }, email: { val: [], err: "" }, taxid: { val: "", err: "" }, weburl: { val: "", err: "" }, loading: true } const result = (d,state)=>({ ...state, ...Object.entries(d).reduce((p,[k,val])=>(p[k] = ({ val, err: '' }), p), {}) }) console.log(result(data, state))

Answer 3

 state = { recordid: "", companyname: {val:"",err:""}, address: {val:"",err:""}, telephone: {val:[],err:""}, email: {val:[],err:""}, taxid: {val:"",err:""}, weburl: {val:"",err:""}, loading: true } const response = { "address": "9242 Kropf Court\\nTulsa, OK 74133", "balance": "1937.2400", "companyname": "HUB Pharmaceuticals, LLC", "email": [ { "emailaddress": "lespinha4r@salon.com", "emailname": "Lizbeth Espinha", "recordid": "ea18a1b3-860d-45ed-a6bc-b5208dcfbac7" } ], "recordid": "fe435915-0e5c-4165-80ca-28c69a5d1ed8", "taxid": "132798707", "telephone": [ { "phonename": "Office", "phonenumber": "9185499797", "recorder": 1, "recordid": "9fd70f31-b450-465b-aec4-39f47ec6e883" } ], "weburl": "https://delicious.com" } for(let key of Object.keys(state)) { if(typeof(response[key]) !== "undefined") { if(typeof(state[key]) === "object") { state[key].val = response[key]; } else { state[key] = response[key]; } } } console.log(state)