mapping through array of objects

Question

I am trying to map through the following data and return "Balance" but it keeps telling me that "coding" its undefined.

here its the array

"entry": [
    {
      "resource": {
        "id": "1980438",
        "type": {
          "coding": [
            {
              "system": "https://www.medeo-health.com/uploads/1/1/8/1/118121028/s491564155970805143-c3-i1-w640_orig.jpeg",
              "code": "25062444",
              "display": "Balance"
            }
          ]
        },
        "manufactureDate": "2017-01-08",
        "expirationDate": "2020-01-08",
        "owner": {
          "reference": "Organization/1980437"
        }
      },
      "search": {
        "mode": "match"
      }
    }, ...

this is what I am trying:

import React, { Component } from 'react';

import Device from './Device/Device';
import axios from 'axios';

class Devices extends Component {
    state = {
        devices: null
    }

    componentDidMount() {
        axios.get('http://hapi.fhir.org/baseDstu3/Device?organization=1980437&_include=Device:organization&_sort=device-name')
            .then(res => {
                this.setState({ devices: res.data.entry });
            })
            .catch(error => {
                console.log(error);
            })
    }

    render() {

        let devices = <p style={{ textAlign: "left", margin: "0" }}>This practitioner have no devices!</p>;
        if (this.state.devices) {
            devices = this.state.devices.map(device => {
                return (
                    <Device
                        key={device.resource.id}
                        name={device.resource.type.coding[0].display}
                    />
                )
            });
        }
        return (
            <div>
                {devices}
            </div>
        );
    };
};

export default Devices;

the id returns well but for name it keeps getting "Cannot read property 'coding' of undefined"

what I am doing wrong?

Based on the info given, it can't find "type" variable. Can you create a sandbox for me to look at? — Shivam Gupta
– Shivam Gupta, Commented Jul 11, 2019 at 15:18

Chandra Shekhar · Accepted Answer · 2019-07-11 15:51:18Z

1

Got the Issue. You are getting undefined because the last object you are receiving does not contain a type property in it. Please Check

Try Something Like this

 {this.state.devices.map(device => {
      if (device.resource.type) { //check type property exists first then render
        console.log(device.resource.type.coding[0].display);
        return (
          <p key={device.resource.id}>
            {device.resource.type.coding[0].display}
          </p>
        );
      } else return null;
    })}

answered Jul 11, 2019 at 15:51

Chandra Shekhar

3,7392 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

mapping through array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related