【问题标题】:What is the best way to pass in data and export an Object?传入数据和导出对象的最佳方式是什么?
【发布时间】:2017-04-05 13:00:36
【问题描述】:

这是我拥有的 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
  }

}

请帮忙!

【问题讨论】:

  • 似乎函数比类更简单。 function transformData (object) { return { // do transformations } }

标签: javascript json reactjs ecmascript-6 redux


【解决方案1】:

结合 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
   ...
}

【讨论】:

  • 谢谢 jpdelatorre,这肯定会帮助我清理它。那么我可以将其设置为模块导出,然后将其包含并传入参数,它会为我返回一个结构化对象吗?
【解决方案2】:

正如 cmets 中提到的,一个函数肯定比一个类更好。另外,如果您的问题是最 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,
    },
  };
}

当然,您的方式也同样有效。这只是比一堂课要轻,而且对眼睛更容易。请注意,它之所以有效,是因为您的密钥名称相同,但如果它们不同,则可以轻松更改。

【讨论】:

  • 谢谢 ZekeDroid - 这正是我正在寻找的帮助和指导!
猜你喜欢
  • 2012-03-04
  • 2017-03-26
  • 1970-01-01
  • 2018-05-27
  • 1970-01-01
  • 2011-08-18
  • 2017-07-15
  • 1970-01-01
  • 2020-12-10
相关资源
最近更新 更多