I'm trying to read data from a GET method that returns an object of customer data in JSON format. I can see the object by logging to the console with console.log(JSON.stringify(obj, null, 2));

However, I am not sure how to work with the elements within the object. It always shows undefined when I try either validating the element or simply logging in to the console.

The sample object obtained from the GET method is as follow:

customer [
  {
    "customer_number": "aa",
    "customer_name": "bb",
    "email": "[email protected]",
    "db_name": "cc",
    "memo": "ee",
    "ready_to_send": "u",
    "id": 14,
    "IsDeleted": "N",
    "ap_listid": "80000026-1370858794",
    "ar_listid": "80000028-1370863458",
    "cash_listid": "80000031-1373515733"
  }
]

And here is my code trying to display a form showing the returned data.

export default class Customers extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: null,
            isDeleting: null,
            customer: [],
            customer_number: "",
            customer_name: "",
            email: "",
            db_name: "",
            memo: ""
        };
    }

    async componentDidMount() {
        try {

            const customer = await this.getCustomer();
            const { customer_number, customer_name, email, db_name, memo} = customer;

            console.log("customer " + JSON.stringify(customer, null, 2));  //Correctly print the object to console in JSON format

            this.setState({
                customer,
                customer_number, 
                customer_name, 
                email, 
                db_name,
                memo

            });
        } catch (e) {
            alert(e);
        }
    }

    getCustomer() {
        return API.get("customers", `/customers/${this.props.match.params.id}`);
    }

    validateForm() {
        return this.state.customer_number.length >0; 
    }

    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }

    render() {
        return (
            <div className="Customers">
            {this.state.customer &&
                <form onSubmit={this.handleSubmit}>
                <FormGroup controlId="customer_number">
                    <ControlLabel>Customer Number</ControlLabel>
                    <FormControl
                    onChange={this.handleChange}
                    value={this.state.customer_number}
                    componentClass="input"
                    />
                </FormGroup>
                <LoaderButton
                    block
                    bsStyle="primary"
                    bsSize="large"
                    disabled={!this.validateForm()}
                    type="submit"
                    isLoading={this.state.isLoading}
                    text="Save"
                    loadingText="Saving…"
                />
                </form>}
            </div>
        );
    }
}

Please help me to understand what I'm doing wrong and how can I resolve the undefined issue. Thanks a lot!

1 Answers

0
Chandru On Best Solutions
try {
  const customer = await this.getCustomer();
  const {customer_number, customer_name, email, db_name, memo} = customer[0] || {};

  this.setState({
     customer,
     customer_number, 
     customer_name, 
     email, 
     db_name,
     memo
  });
}

Because it is an array