传递数据和导出对象的最佳方法是什么?

时间:2016-11-22 00:33:00

标签: javascript json reactjs ecmascript-6 redux

这是我拥有的JSON对象:

  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;

我会通过react-redux中的props传递数据,但是寻找最有效的方法来创建对象。

我一直在寻找创建ES6类并在将其格式化为正确的结构后返回JSON。我收到的数据与我需要提交给API的格式相同。

我写了这个课程,这似乎有用 - 但不确定它是否是最好的前进方式?

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
  }

}

请帮忙!

2 个答案:

答案 0 :(得分:0)

如评论中所述,一个函数肯定比一个类好。此外,如果您的问题是最ES6的做法(如,最紧凑和干净),那么我建议充分利用解构功能:

function formatDataForAPI(data) {
  const {
    address1,
    address2,
    zipCode,
    city,
    state,
    type,
    addressType,
    country,
    dayPhoneNumber,
    companyName,
    firstName,
    lastName,
  } = data;

  return {
    addressData: {
      address1,
      address2,
      zipCode,
      city,
      state,
      type,
      addressType,
      country,
    },
    contactInfo: {
      dayPhoneNumber,
      companyName,
    },
    personalInfo: {
      firstName,
      lastName,
    },
  };
}

当然,你的方式同样适用。这比一个班级重,而且更容易在眼睛上。请注意,它只能起作用,因为键的名称相同,但如果不是,则可以轻松更改。

答案 1 :(得分:0)

ES6功能destructuring assignmentshorthand property assignment的组合可以简化对象的格式化。

您可以从参数开始解构,甚至重命名变量并添加默认值。

所以对于看起来像这样的输入对象......

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

而不是像这样编写你的函数

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

你可以写这样的函数......

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
      }
   }
}

返回值使用分配...的简写表示法。

你不必做

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