javascript - 传入数据和导出对象的最佳方式是什么?

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

}

请帮忙!

最佳答案

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

关于javascript - 传入数据和导出对象的最佳方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40731927/

相关文章:

reactjs - ChartJS不根据x轴数据渲染线条

javascript - 如何向 React 提供 JSON?

reactjs - 更改 MUI 文本字段的多个组件根

javascript - 当 "select"元素发生变化时,如何模拟用户点击javascript中的提交按钮?

javascript - 嘿,我正在尝试将 2 个条件放在一个 if 语句中。一个用 Javascript,一个用 PHP

json - Azure 数据工厂复制事件

json - 为什么JSON编码需要引用Perl版本字符串?

javascript - 使用javascript提交后如何保留下拉列表的选定值

php - mootools单选按钮问题

python - 使用Python解析JSON?