How to map complex json in React

Question

I have an API that i am connecting to as part of an application that i am developing and i am having a hard time with trimming down everything to get to the objects and rendering out the data.

I have inserted some of the json snippet that is coming back from the API.

Please help.

[
  {
    "ssn": [],
    "name": [
      {
        "pidlist": [],
        "meta": {
          "sources": [],
          "firstSources": [],
          "middleSources": [],
          "lastSources": [],
          "firstInitialSources": [],
          "middleInitialSources": [],
          "firstSeen": 19931001,
          "lastSeen": 20220226,
          "count": 133,
          "rank": 0
        },
        "data": "JOHN R ARCHER",
        "first": "JOHN",
        "last": "ARCHER",
        "middle": "R"
      },
      {
        "pidlist": [],
        "meta": {
          "sources": [],
          "firstSources": [],
          "middleSources": [],
          "lastSources": [],
          "firstInitialSources": [],
          "middleInitialSources": [],
          "firstSeen": 19931001,
          "lastSeen": 20220222,
          "count": 79,
          "rank": 1
        },
        "data": "JOHN ROBERT ARCHER",
        "first": "JOHN",
        "last": "ARCHER",
        "middle": "ROBERT"
      },
      {
        "pidlist": [],
        "meta": {
          "sources": [],
          "firstSources": [],
          "middleSources": [],
          "lastSources": [],
          "firstInitialSources": [],
          "middleInitialSources": [],
          "firstSeen": 19870601,
          "lastSeen": 20211214,
          "count": 107,
          "rank": 2
        },
        "data": "JOHN ARCHER",
        "first": "JOHN",
        "last": "ARCHER"
      }
    ],
    "dob": [
      {
        "meta": {
          "sources": [],
          "dSources": [],
          "mSources": [],
          "ySources": [],
          "firstSeen": 19900301,
          "lastSeen": 20220222,
          "rank": 0
        },
        "date": {
          "data": "XX/XX/XXXX",
          "sortable": 0
        },
        "age": "51"
      },
      {
        "meta": {
          "sources": [],
          "dSources": [],
          "mSources": [],
          "ySources": [],
          "firstSeen": 19900301,
          "lastSeen": 20220222,
          "rank": 2
        },
        "age": "71"
      },
      {
        "meta": {
          "sources": [],
          "dSources": [],
          "mSources": [],
          "ySources": [],
          "firstSeen": 20070501,
          "lastSeen": 20070501,
          "rank": 3
        },
        "age": "??"
      }
    ],
    "address": [
      {
        "meta": {
          "sources": [],
          "firstSeen": 20151204,
          "lastSeen": 20220316,
          "count": 87,
          "rank": 0
        },
        "data": "1775 EDWIN DR, WAYLAND, MI 49348-9315",
        "streetNumber": "1775",
        "street": "EDWIN",
        "streetSuffix": "DR",
        "city": "WAYLAND",
        "state": "MI",
        "zip": "49348",
        "zip4": "9315",
        "dateRange": "12/04/2015-03/16/2022",
        "complete": "1775 EDWIN DR",
        "isCass": "Y",
        "county": "BARRY",
        "rank": 0,
        "latitude": 42.62675,
        "longitude": -85.534946,
        "ownership": "C",
        "topPoBox": 0,
        "highFrequency": false
      },
      {
        "meta": {
          "sources": [],
          "firstSeen": 20180816,
          "lastSeen": 20210629,
          "count": 3,
          "rank": 1
        },
        "data": "1803 S PATTERSON RD, WAYLAND, MI 49348-8817",
        "streetNumber": "1803",
        "street": "PATTERSON",
        "streetSuffix": "RD",
        "city": "WAYLAND",
        "state": "MI",
        "zip": "49348",
        "zip4": "8817",
        "predir": "S",
        "dateRange": "08/16/2018-06/29/2021",
        "complete": "1803 S PATTERSON RD",
        "isCass": "Y",
        "county": "BARRY",
        "rank": 1,
        "ownership": "C",
        "topPoBox": 0,
        "highFrequency": false
      },

This is what i have tried as a first step and cannot find anything helpful in searching:

  { Object.keys(data[0]).map((item, i) => (
            <div key={i}>
            </div>
    ))}

I have referenced these two posts and tried them but i am still not getting the results that i am looking for:

1. How to Map JSON in React?
2. How to map a nested JSON response in React

Answer 1

I would be inclined to make a wrapper class to hold your data (since it's kind of complex). And then add helper methods to grab the bits and pieces you want to get out of it.

Then you can use those to display things in a component.

Something like:

// Wrapper class to hold the data and build small getters to pluck
// out the things you want.  `Entry` is a bad name.  You should chose
// something that makes sense in your domain like UserData or ?
class Entry {
  constructor(data) {
    this.data = data;
  }

  get address() {
    return this.data.address[0].data;
  }

  get name() {
    return this.data.name[0].data;
  }

  get dob() {
    return this.data.dob[0].date.data;
  }

  get age() {
    return this.data.dob[0].age
  }
}

Then a component that can, given one Entry render it...

const EntryDisplay = ({ item }) => {
  return (
    <>
      <dl>
        <dt>Address</dt>
        <dd>
          {item.address}
        </dd>

        <dt>Name</dt>
        <dd>
          {item.name}
        </dd>

        <dt>DOB</dt>
        <dd>
          {item.dob} ({item.age} years old)
        </dd>
      </dl>
    </>
  );
};

This could instead render a table row (tr) or list item or paragraphs or whatever. I chose the description list for simplicity.

And finally, run through your list of data and render the components like:

const EntriesList = () => {
  return (
    <div>
      <h1>Entries</h1>
      {data.map((entry, idx) => (
        <div key={idx}>
          <h2>Entry {idx}</h2>
          <EntryDisplay item={new Entry(entry)} />
        </div>
      ))}
    </div>
  );
};

The beauty of the wrapper class (Entry) is that whatever complex thing you need to do to get data out of the deep data hash is compartmentalized in that "model", so then your component can be simpler.

To make this work in your case, you'll likely have to add more helper methods for the particular bits of data you want for each subsection. Hopefully this is a reasonable starting point.

If you need more, you could add even more helper classes/models to unpack Address as a thing or DOB, since each one of those seems to allow multiple entries.