jrutter jrutter - 18 days ago 6
React JSX Question

What is the best way to pass in data and export an Object?

Here is the JSON object that I have:

const json = {
"itemDetails": itemsArray,
"paymentDetails": [{
"billingAddress": {
"address": {
"address1": billingAddress.address1,
"address2": billingAddress.address2,
"zipCode": billingCityStateZip.zipCode,
"city": billingCityStateZip.city,
"type": "US",
"addressType": billingAddress.addressType,
"stateCode": billingCityStateZip.stateCode,
"country": "US"
},
"contactInfo": {
"dayPhoneNumber": billingPhone,
"companyName": billingAddress.companyName
},
"personalInfo": {
"firstName": billingAddress.firstName,
"lastName": billingAddress.firstName
}
},
"cardType": paymentDetails.cctype,
"cardNumber": paymentDetails.ccnumber,
"expirationMonth": paymentDetails.ccmonth,
"expirationYear": paymentDetails.ccyear,
"cvv": paymentDetails.cvv,
"type": "creditCard"
}],
"shippingDetails": [{
"shippingAddress": {
"address": {
"address1": shippingAddress.address1,
"address2": shippingAddress.address2,
"zipCode": shippingCityStateZip.zipCode,
"city": shippingCityStateZip.city,
"type": "US",
"addressType": shippingAddress.addressType,
"stateCode": shippingCityStateZip.stateCode,
"country": "US"
},
"contactInfo": {
"email": email.emailAddress,
"dayPhoneNumber": shippingPhone,
"companyName": shippingAddress.companyName
},
"personalInfo": {
"firstName": shippingAddress.firstName,
"lastName": shippingAddress.lastName
}
},
"unlimitedDetails": {
"unlimitedFlag": "",
"unlimitedSKU": "",
"unlimiteProductId": ""
},
"shippingLabelMessages": {
"labelMessage1": "",
"labelMessage2": "",
"labelMessage3": "",
"labelMessage4": ""
},
"itemDetails": itemsArray,
"type": "hardGoodShippingType"
}],
"couponDetails": [],
"userDetails": {
"userCheckoutPreferences": {
"payViaPaypal": "false",
"payByVouchersOnly": "false"
},
"userDateOfBirth": {
"day": dob.dobDay,
"month": dob.dobMonth,
"year": dob.dobYear
},
"password": "",
"emailFlag": "false",
"userBusinessPartner": {
"businessPartner": null,
"businessPartnerNumber": null
}
},
"offerDetails":{
"responseCode":responseCode
},
"webRedirectDetails": {
}
}
return json;


I would be passing data into this through props in react-redux, but looking for the most effiencient way to creat the object.

I have been looking at creating ES6 classes and returning the JSON after formatting it into the right structure. The data I'm getting in, isnt the same format as that I need to submit to an API as above.

I wrote this class, which seems to work - but not sure if its the best way forward?

class AddressObject {
constructor(object) {

// Create Address
this.address = {};
this.address.address1 = object.address1;
this.address.address2 = object.address2;
this.address.zipCode = object.zipCode;
this.address.city = object.city;
this.address.state = object.state;
this.address.type = object.type;
this.address.addressType = object.addressType;
this.address.country = object.country;

// Create contactInfo
this.contactInfo = {};
this.contactInfo.dayPhoneNumber = object.dayPhoneNumber;
this.contactInfo.companyName = object.companyName;

// Create personalInfo
this.personalInfo = {};
this.personalInfo.firstName = object.firstName;
this.personalInfo.lastName = object.lastName;
}

getAddress() {
return this
}

}


Please help!

Answer

Combination of ES6 features destructuring assignment and shorthand property assignment can simplify formatting your object.

You can start destructuring from your parameters and even renaming the variable and adding default value.

So for an input object that looks something like this...

{
  address_1: 'my address line 1',
  address_2: 'my address line 2',
  city: '...',
  contact: {
    firstName: 'John',
    lastName: 'Smith',
    phone: '1234'
  }
}

Instead of writing your function like this

function formatData(data) {
   return {
      address1: data.address_1,
      ...
   }
}

You can write your function like this...

function formatData({
   address_1: address1, 
   address_2: address2 = '', 
   city, 
   zipCode, 
   state, 
   contact: { 
       firstName, 
       lastName, 
       phone: dayPhoneNumber 
   }
}) {
   return {
      addressData: {
          address1,
          address2,
          city,
          zipCode,
          state
      },
      contactInfo: {
         companyName,
         dayPhoneNumber
      }
   }
}

The return value uses shorthand notation of assigning...

You don't have to do

{
   address1: address1,
   address2: address2
   ...
}