mapping array for specific object-CodePudding

I'm trying to map an array in (React js) to find out if it contains a "photographer" value, so I can display a picture saying that this specific part of the array is copyright protected (parts of these array does not contain "photographer")

This is the array I'm working with:

"collection": {
"version": "1.0",
"href": "http://images-api.nasa.gov/search?q=sun&page=1&media_type=image&year_start=2022&year_end=2022",
"items": [
  {
    "href": "https://images-assets.nasa.gov/image/ACD22-0003-004/collection.json",
    "data": [
      {
        "album": [
          "CAPSTONE"
        ],
        "center": "ARC",
        "title": "CAPSTONE facing the Sun (Illustration)",
        "photographer": "Daniel J. Rutter",
        "nasa_id": "ACD22-0003-004",
        "media_type": "image",
        "keywords": [
          "CAPSTONE",
          "NRHO",
          "Cubesat",
          "Artemis"
        ],
        "date_created": "2022-02-02T00:00:00Z",
        "description": "CAPSTONE, a microwave oven-sized CubeSat, will fly in cislunar space – the orbital space near and around the Moon. The mission will demonstrate an innovative spacecraft-to-spacecraft navigation solution at the Moon from a near rectilinear halo orbit slated for Artemis’ Gateway. Illustration by Daniel Rutter."
      }
    ],
    "links": [
      {
        "href": "https://images-assets.nasa.gov/image/ACD22-0003-004/ACD22-0003-004~thumb.jpg",
        "rel": "preview",
        "render": "image"
      }
    ]
  }

this is how I have mapped this array:

 {data?.collection?.items?.map((items, index) => {
                if(
                    **items.data.photographer is true (here is where I'm stuck!**
              
                )
                 {
                    return (
*Something specific*
          )
                    } else {
                         return(
               something else.)}

note that I'm using

data?.collection?.items?.map((items, index) =>...

because I want to first display the {items.links}.

I also tried creating a const...

const map1 = data.collections.items.data.map(data => data);

then:

if ( map1.photographer) return ( something)

however that did not work. I have a feeling I miswrote it.

Thanks everyone for your help! Cheers!!

CodePudding user response：

Using Array.prototype.some() to identify the "photographer" property in any of the data field item.

Try like this:

function App() {
  const data = {
    collection: {
      version: "1.0",
      href:
        "http://images-api.nasa.gov/search?q=sun&page=1&media_type=image&year_start=2022&year_end=2022",
      items: [
        {
          href:
            "https://images-assets.nasa.gov/image/ACD22-0003-004/collection.json",
          data: [
            {
              album: ["CAPSTONE"],
              center: "ARC",
              title: "CAPSTONE facing the Sun (Illustration)",
              photographer: "Daniel J. Rutter",
              nasa_id: "ACD22-0003-004",
              media_type: "image",
              keywords: ["CAPSTONE", "NRHO", "Cubesat", "Artemis"],
              date_created: "2022-02-02T00:00:00Z",
              description:
                "CAPSTONE, a microwave oven-sized CubeSat, will fly in cislunar space – the orbital space near and around the Moon. The mission will demonstrate an innovative spacecraft-to-spacecraft navigation solution at the Moon from a near rectilinear halo orbit slated for Artemis’ Gateway. Illustration by Daniel Rutter."
            }
          ],
          links: [
            {
              href:
                "https://images-assets.nasa.gov/image/ACD22-0003-004/ACD22-0003-004~thumb.jpg",
              rel: "preview",
              render: "image"
            }
          ]
        }
      ]
    }
  };

  return (
    <div>
      {data.collection.items.map((item, index) => {
        const copyRighted = item.data.some((d) =>
          d.hasOwnProperty("photographer")
        );
        return (
          <React.Fragment key={index}>
            <div>{copyRighted && "Copy Righted"}</div>
            <div>{item.href}</div>
          </React.Fragment>
        );
      })}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>