Как извлечь один объект из вложенных объектов внутри массивов

Question

Я получил данные из одного открытого API. И из этого API я хочу показать изображение в моем браузере. Но проблема в массиве изображений, там есть 3 изображения URL. После использования метода map массивов я вызвал первый объект [0], но он не работал. Я использую React js - это мое Front-end приложение.

Это мой компонент React js.

import React, { useEffect, useState } from "react";
import "./ActivitiesList.css";
import axios from "axios";

import "./ActivitiesList.css";

function ActivitiesList() {
  const [activities, setactivities] = useState({ data: [] });
  const [show, setshow] = useState(10);

  useEffect(() => {
    fetchingData();
  }, []);

  const fetchingData = () => {
    axios
      .get("/activities")
      .then(response => {
        //console.log("response", response);
        setactivities({ data: response.data.data }); 
      })
      .catch(err => console.log(err));
  };

  return (
    <div className="EventList">
      <section className="our-event">
        <div className="grid-container">
          {activities.data.slice(0, show).map((list, index) => {
            return (
              <div key={index}>
                <a
                  href={list.info_url} /
                  style={{
                    cursor: "pointer",
                    textDecoration: "none",
                    color: "black"
                  }}
                  target="a_blank"
                >
                  <div className="whole">
                    <div className="Personcontainer">
                      <div className="Box">
                        {list.description.images.map((img, index) => {
                          return (
                            <img
                              src={img.url[0]} //IN HERE I TRY TO SHOW FIRST OBJECT
                              alt="pics"
                              style={{ width: "270px", height: "270px" }}
                            />
                          );
                        })}
                      </div>
                    </div>
                  </div>

                </a>
              </div>
            );
          })}
        </div>
        {show < activities.data.length && (
          <button onClick={() => setshow(show + 10)} className="Button">
            loadmore
          </button>
        )}
      </section>
    </div>
  );
}

export default ActivitiesList;

Вот открытый файл API JSON.

{
  "meta": {
    "count": "96",
    "next": "http://open-api.myhelsinki.fi/v1/activities/?limit=1&start=1"
  },
  "data": [
    {
      "id": "f67de4f6-d23e-49a7-b9dd-63d68df533a3",
      "name": {
        "fi": "Purjehdus 1700-luvun tyyliin tykkisluuppi Dianalla",
        "en": "Cannon sloop Diana´s sailings",
        "sv": "Seglingar med kanonslupen Diana",
        "zh": null
      },
      "source_type": {
        "id": 3,
        "name": "MyHelsinki"
      },
      "info_url": "https://www.suomenlinnatours.com/en/cannon-sloop-diana?johku_product=7",
      "modified_at": "2020-01-27T09:37:27.221Z",
      "location": {
        "lat": 60.145111083984375,
        "lon": 24.987560272216797,
        "address": {
          "street_address": "Suomenlinna Tykistölahti Pier",
          "postal_code": null,
          "locality": "Helsinki"
        }
      },
      "description": {
        "intro": null,
        "body": "<p>Luvassa on amiraali Chapamin tahdittama mielenkiintoinen laivamatka valistusajan Viaporiin. Dianan purjehduksien aikana nähdään Suomenlinnaa mereltä käsin ja kuullaan saaristolaivaston kiehtovasta historiasta. Osallistujat pääsevät halutessaan avustamaan 1700-luvun univormuihin sonnustautunutta miehistöä purjeiden nostossa ja laskussa, lisäksi muutama reipas pääsee mukaan soutuharjoitukseen.</p>\r\n\r\n<p>Purjehdukset lähtevät Suomenlinnan Tykistölahden laiturista. Suomenlinnaan pääsee JT-Linen vesibussilla tai HSL:n lautalla Kauppatorilta (venematka ei kuulu lipun hintaan). Diana on avovene, joten säänmukainen varustus on tärkeä.&nbsp;<br />\r\n<br />\r\n<span><span>Lasten meriseikkailu – perhepurjehdus ajalla 26.6.- 3.8.2019<br />\r\nkeskiviikkoisin, torstaisin ja lauantaisin kello 12.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 12.30.<br />\r\n<br />\r\nPurjehdus 1700-luvun tyyliin – yleisöpurjehdus ajalla 26.6.- 3.8.2019:<br />\r\nKeskiviikkoisin, torstaisin ja lauantaisin kello 15.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 15.30</span></span><br />\r\n&nbsp;</p>\r\n",
        "images": [ // FROM HERE I WANT TO SHOW FIRST OBJECT URL.
          {
            "url": "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana.jpg",
            "copyright_holder": "",
            "license_type": {
              "id": 1,
              "name": "All rights reserved."
            }
          },
          {
            "url": "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_2.jpg",
            "copyright_holder": "",
            "license_type": {
              "id": 1,
              "name": "All rights reserved."
            }
          },
          {
            "url": "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_3.jpg",
            "copyright_holder": "",
            "license_type": {
              "id": 1,
              "name": "All rights reserved."
            }
          }
        ]
      },
      "tags": [
        {
          "id": "myhelsinki:45",
          "name": "sea"
        },
        {
          "id": "myhelsinki:836",
          "name": "suomenlinna"
        },
        {
          "id": "myhelsinki:793",
          "name": "history"
        }
      ],
      "where_when_duration": {
        "where_and_when": "Suomenlinna, kesäkuusta elokuuhun",
        "duration": "N. 1h 45min"
      }
    }
  ],
  "tags": {
    "myhelsinki:45": "sea",
    "myhelsinki:793": "history",
    "myhelsinki:836": "suomenlinna"
  }
}

Answer 1

Что я могу видеть из данных JSON, внутри массива images есть 3 различных объекта, и у каждого есть ключ url.

Так что при использовании функции карты на массив изображений list.description.images.map((img, index) => img.url должен давать URL для каждого объекта в массиве.

Вместо src={img.url[0]} попробуйте src={img.url}.

И если вы хотите получить доступ только к первому объекту из массива, вы можете удалить метод карты и напрямую использовать list.description.images[0].url.

Answer 2

Если вам нужно визуализировать только одно изображение, вам не нужно второе map.

Поэтому вместо:

          <div className="Box">
            {list.description.images.map((img, index) => {
              return (
                <img
                  src={img.url[0]} //IN HERE I TRY TO SHOW FIRST OBJECT
                  alt="pics"
                  style={{ width: "270px", height: "270px" }}
                />
              );
            })}
          </div>

используйте:

          <div className="Box">

                <img
                  src={list.description.images[0].url}
                  alt="pics"
                  style={{ width: "270px", height: "270px" }}
                />

          </div>

edit: чтобы избежать ошибок в случае элементов, у которых нет изображений, вы можете проверить, например:

          <div className="Box">
            { list.description.images && list.description.images[0] &&
                <img
                  src={list.description.images[0].url}
                  alt="pics"
                  style={{ width: "270px", height: "270px" }}
                />
             }
          </div>

или:

          <div className="Box">
                <img
                  src={(list.description.images && list.description.images[0]) ? list.description.images[0].url : ''}
                  alt="pics"
                  style={{ width: "270px", height: "270px" }}
                />
          </div>

Answer 3

Ты выглядишь так - демоверсия https://codesandbox.io/s/competent-zhukovsky-icl60

Предположим, ваше состояние ниже

state = {
    items: {
      meta: {
        count: "96",
        next: "http://open-api.myhelsinki.fi/v1/activities/?limit=1&start=1"
      },
      data: [
        {
          id: "f67de4f6-d23e-49a7-b9dd-63d68df533a3",
          name: {
            fi: "Purjehdus 1700-luvun tyyliin tykkisluuppi Dianalla",
            en: "Cannon sloop Diana´s sailings",
            sv: "Seglingar med kanonslupen Diana",
            zh: null
          },
          source_type: {
            id: 3,
            name: "MyHelsinki"
          },
          info_url:
            "https://www.suomenlinnatours.com/en/cannon-sloop-diana?johku_product=7",
          modified_at: "2020-01-27T09:37:27.221Z",
          location: {
            lat: 60.145111083984375,
            lon: 24.987560272216797,
            address: {
              street_address: "Suomenlinna Tykistölahti Pier",
              postal_code: null,
              locality: "Helsinki"
            }
          },
          description: {
            intro: null,
            body:
              "<p>Luvassa on amiraali Chapamin tahdittama mielenkiintoinen laivamatka valistusajan Viaporiin. Dianan purjehduksien aikana nähdään Suomenlinnaa mereltä käsin ja kuullaan saaristolaivaston kiehtovasta historiasta. Osallistujat pääsevät halutessaan avustamaan 1700-luvun univormuihin sonnustautunutta miehistöä purjeiden nostossa ja laskussa, lisäksi muutama reipas pääsee mukaan soutuharjoitukseen.</p>\r\n\r\n<p>Purjehdukset lähtevät Suomenlinnan Tykistölahden laiturista. Suomenlinnaan pääsee JT-Linen vesibussilla tai HSL:n lautalla Kauppatorilta (venematka ei kuulu lipun hintaan). Diana on avovene, joten säänmukainen varustus on tärkeä.&nbsp;<br />\r\n<br />\r\n<span><span>Lasten meriseikkailu – perhepurjehdus ajalla 26.6.- 3.8.2019<br />\r\nkeskiviikkoisin, torstaisin ja lauantaisin kello 12.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 12.30.<br />\r\n<br />\r\nPurjehdus 1700-luvun tyyliin – yleisöpurjehdus ajalla 26.6.- 3.8.2019:<br />\r\nKeskiviikkoisin, torstaisin ja lauantaisin kello 15.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 15.30</span></span><br />\r\n&nbsp;</p>\r\n",
            images: [
              // FROM HERE I WANT TO SHOW FIRST OBJECT URL.
              {
                url:
                  "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana.jpg",
                copyright_holder: "",
                license_type: {
                  id: 1,
                  name: "All rights reserved."
                }
              },
              {
                url:
                  "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_2.jpg",
                copyright_holder: "",
                license_type: {
                  id: 1,
                  name: "All rights reserved."
                }
              },
              {
                url:
                  "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_3.jpg",
                copyright_holder: "",
                license_type: {
                  id: 1,
                  name: "All rights reserved."
                }
              }
            ]
          },
          tags: [
            {
              id: "myhelsinki:45",
              name: "sea"
            },
            {
              id: "myhelsinki:836",
              name: "suomenlinna"
            },
            {
              id: "myhelsinki:793",
              name: "history"
            }
          ],
          where_when_duration: {
            where_and_when: "Suomenlinna, kesäkuusta elokuuhun",
            duration: "N. 1h 45min"
          }
        }
      ],
      tags: {
        "myhelsinki:45": "sea",
        "myhelsinki:793": "history",
        "myhelsinki:836": "suomenlinna"
      }
    }
    }

  render() {
    const { items } = this.state;
    let images = items ? items.data[0].description.images : [];
    console.log(items.data[0]);
    return (
      <div>
        <h2>List of items</h2>
        {images.map((image, index) => (
          <div key={index}>
            <img src={image.url} alt="imageicon" />
          </div>
        ))}
      </div>
    );
  }

Или получить все изображения, используя javascript.

let results = {
      meta: {
        count: "96",
        next: "http://open-api.myhelsinki.fi/v1/activities/?limit=1&start=1"
      },
      data: [
        {
          id: "f67de4f6-d23e-49a7-b9dd-63d68df533a3",
          name: {
            fi: "Purjehdus 1700-luvun tyyliin tykkisluuppi Dianalla",
            en: "Cannon sloop Diana´s sailings",
            sv: "Seglingar med kanonslupen Diana",
            zh: null
          },
          source_type: {
            id: 3,
            name: "MyHelsinki"
          },
          info_url:
            "https://www.suomenlinnatours.com/en/cannon-sloop-diana?johku_product=7",
          modified_at: "2020-01-27T09:37:27.221Z",
          location: {
            lat: 60.145111083984375,
            lon: 24.987560272216797,
            address: {
              street_address: "Suomenlinna Tykistölahti Pier",
              postal_code: null,
              locality: "Helsinki"
            }
          },
          description: {
            intro: null,
            body:
              "<p>Luvassa on amiraali Chapamin tahdittama mielenkiintoinen laivamatka valistusajan Viaporiin. Dianan purjehduksien aikana nähdään Suomenlinnaa mereltä käsin ja kuullaan saaristolaivaston kiehtovasta historiasta. Osallistujat pääsevät halutessaan avustamaan 1700-luvun univormuihin sonnustautunutta miehistöä purjeiden nostossa ja laskussa, lisäksi muutama reipas pääsee mukaan soutuharjoitukseen.</p>\r\n\r\n<p>Purjehdukset lähtevät Suomenlinnan Tykistölahden laiturista. Suomenlinnaan pääsee JT-Linen vesibussilla tai HSL:n lautalla Kauppatorilta (venematka ei kuulu lipun hintaan). Diana on avovene, joten säänmukainen varustus on tärkeä.&nbsp;<br />\r\n<br />\r\n<span><span>Lasten meriseikkailu – perhepurjehdus ajalla 26.6.- 3.8.2019<br />\r\nkeskiviikkoisin, torstaisin ja lauantaisin kello 12.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 12.30.<br />\r\n<br />\r\nPurjehdus 1700-luvun tyyliin – yleisöpurjehdus ajalla 26.6.- 3.8.2019:<br />\r\nKeskiviikkoisin, torstaisin ja lauantaisin kello 15.30<br />\r\nElokuun lauantaisin 10.8., 17.8., 24.8. ja 31.8.2019 kello 15.30</span></span><br />\r\n&nbsp;</p>\r\n",
            images: [
              // FROM HERE I WANT TO SHOW FIRST OBJECT URL.
              {
                url:
                  "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana.jpg",
                copyright_holder: "",
                license_type: {
                  id: 1,
                  name: "All rights reserved."
                }
              },
              {
                url:
                  "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_2.jpg",
                copyright_holder: "",
                license_type: {
                  id: 1,
                  name: "All rights reserved."
                }
              },
              {
                url:
                  "https://edit.myhelsinki.fi/sites/default/files/2017-06/Tykkisluuppi_Diana_3.jpg",
                copyright_holder: "",
                license_type: {
                  id: 1,
                  name: "All rights reserved."
                }
              }
            ]
          },
          tags: [
            {
              id: "myhelsinki:45",
              name: "sea"
            },
            {
              id: "myhelsinki:836",
              name: "suomenlinna"
            },
            {
              id: "myhelsinki:793",
              name: "history"
            }
          ],
          where_when_duration: {
            where_and_when: "Suomenlinna, kesäkuusta elokuuhun",
            duration: "N. 1h 45min"
          }
        }
      ],
      tags: {
        "myhelsinki:45": "sea",
        "myhelsinki:793": "history",
        "myhelsinki:836": "suomenlinna"
      }
    }
    let images = results ? results.data[0].description.images : [];
    let urls = images.map(image=>image.url);
    console.log(urls);