特定对象的映射数组

Question

我试图在数组中映射一个数组(React )，以确定它是否包含一个“摄影者”值，这样我就可以显示一张图片，说明数组的这个特定部分是版权保护的(这些数组的部分不包含“摄影师”)。

这是我正在处理的数组：

"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"
      }
    ]
  }

我是这样映射这个数组的：

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

注意我用的是

Data？.collection？.items？.map((项目，索引)=>.

因为我想首先显示{items.links}。

我还试着创造一个康斯特..。

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

然后：

if ( map1.photographer) return ( something)

然而，这是行不通的。我有预感我写错了。

谢谢大家的帮助！干杯！！

Answer 1

使用Array.prototype.some()标识任何数据字段项中的“摄影者”属性。

就像这样：

​

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>

​