как выполнить выборку Api и отобразить результаты

ProgramBox

как выполнить выборку Api и отобразить результаты

Post author:admin
Запись опубликована:8 февраля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

я работаю над простым приложением, которое будет извлекать данные из Api и отображать их.

у меня есть эта функция

 const getAUserProfile = () => {
  const api = 'https://randomuser.me/api/';

  // make API call here
  return fetch(api)
    .then(response => response.json())
    .then(response => displayUserPhotoAndName(response))
  notify(`requesting profile data ...`);
};

здесь я пытаюсь извлечь данные и передать в качестве параметра функции displayUserPhotoAndName .

Теперь в функции displayUserPhotoAndName я пытаюсь создать оператор, который деструктурирует параметр данных и получает из него свойство results;

я попытался создать второй оператор в следующей строке, который деструктурирует переменную результатов, которую я только что создал, и получить из нее первый элемент (это массив! Смотрите https://randomuser.me/api /). элемент деструктурированного массива должен быть объявлен как profile . Это представляет данные профиля для пользователя, полученные из вызова API, которые я хочу отобразить в своем приложении.

это функция displayUserPhotoAndName

 const displayUserPhotoAndName = (data) => {
    if(!data) return;

    // add your code here
    const {results} = data;
    const {profile} = results;
    document.getElementById('name').innerHTML = profile[results];

    clearNotice();
  };

теперь я пытаюсь отобразить заголовок, имя и фамилию с помощью этой строки кода document.getElementById(‘name’).innerHTML = profile[0].title profile[0].first profile[0].last;.

это не работает, когда я пытаюсь запустить его в sapio

1. просто «это не работает» не очень понятно. Я бы предположил — хотя на данном этапе это очень предположение — что данные, возвращаемые из API, не в той форме, которую вы ожидаете. Попробуйте поместить console.log(data); в начало своей displayUserPhotoAndName функции, чтобы увидеть, какой объект вы получаете.

2. В результатах нет профиля

Ответ №1:

В profile data массиве результатов или в нем нет свойства. Таким образом, ваше назначение const {profile} = results; будет неопределенным

Вы можете указать profile на первый элемент в массиве результатов. Затем используйте пути свойств для того, что вы хотите отобразить

 const displayUserPhotoAndName = (data) => {
  if (!data) return;
 
  // add your code here
  const {results} = data;

  const profile = results[0];
  
  const fullName = profile.name.first   ' '   profile.name.last;

  document.getElementById('name').innerHTML = fullName

};

const getAUserProfile = () => {
  const api = 'https://randomuser.me/api/';

  // make API call here
  return fetch(api)
    .then(response => response.json())
    .then(displayUserPhotoAndName)

};

getAUserProfile()

 <div id="name"></div>

1. большое спасибо, это сработало, теперь я могу отобразить имя, но я все еще получаю эту ошибку ===> Вы не деструктурировали свойство «profile» из «результатов», полученных из «data», переданных в функцию «displayUserPhotoAndName»

2. цель состоит в том, чтобы деструктурировать созданную мной переменную результатов и получить из нее первый элемент. элемент деструктурированного массива должен быть объявлен как profile

3. Возможно, от вас ожидают сделать что-то вроде const {name:{first,last}} = profile . Затем вы можете использовать first and last в качестве переменных

4. @ charlietfl теперь все работает хорошо, но мне также нужно изменить эту функцию ниже, чтобы получать и отображать возраст пользователя. это функция var displayBirthdate = ({dob}) => {const {results} = dob; const [profile] = […results]; const theage = profile.dob.age; документ. querySelector(‘.details’).innerHTML = возраст ‘лет’; };

Ответ №2:

Вероятно, вам это нужно:

 document.getElementById('name').innerHTML = results[0].name.title   results[0].name.first   results[0].name.last;

Потому что json выглядит так:

 {
  "results":[
    {
      "gender":"male",
      "name":{
        "title":"mr",
        "first":"vidar",
        "last":"sjursen"
      },
      "location":{
        "street":"bestum tverrvei 7385",
        "city":"bratsberg",
        "state":"sogn og fjordane",
        "postcode":"8514",
        "coordinates":{
          "latitude":"57.7278",
          "longitude":"-95.6342"
        },
        "timezone":{
          "offset":" 7:00",
          "description":"Bangkok, Hanoi, Jakarta"
        }
      },
      "email":"vidar.sjursen@example.com",
      "login":{
        "uuid":"fbc411b4-f34c-497f-acff-8294ddcf8738",
        "username":"whitezebra569",
        "password":"shoes",
        "salt":"8prWID0j",
        "md5":"02ea3e887aaa140ad312905801ae2353",
        "sha1":"c9a66349e68825dc02c74618aac8572fbdd01e5b",
        "sha256":"8297cc85be1127223761fb80b8f554632a6a37c35d58d435293a8f6b2dca19f3"
      },
      "dob":{
        "date":"1952-10-19T01:20:59Z",
        "age":66
      },
      "registered":{
        "date":"2011-11-12T03:06:29Z",
        "age":7
      },
      "phone":"88795425",
      "cell":"92914506",
      "id":{
        "name":"FN",
        "value":"19105218888"
      },
      "picture":{
        "large":"https://randomuser.me/api/portraits/men/25.jpg",
        "medium":"https://randomuser.me/api/portraits/med/men/25.jpg",
        "thumbnail":"https://randomuser.me/api/portraits/thumb/men/25.jpg"
      },
      "nat":"NO"
    }
  ],
  "info":{
    "seed":"48917bf154395ac4",
    "results":1,
    "page":1,
    "version":"1.2"
  }
}

Что означает, что когда вы делаете это:

 const {results} = data;

Тогда массив будет там, и у массива нет свойства profile для его получения:

 const {profile} = results;

1. цель состоит в том, чтобы деструктурировать созданную мной переменную результатов и получить из нее первый элемент. элемент деструктурированного массива должен быть объявлен как profile

Ответ №3:

Проблема в этой строке кода

 const {results} = data;
-->  const {profile} = results;

«{results}» извлечет свойство results из вашего ответа, который, в свою очередь, является массивом.

когда вы пытаетесь извлечь {profile} из результатов, в нем нет такого свойства, как profile .

Что делает переменную профиля неопределенной. Это была проблема.

Примечание: переменная {something} будет искать свойство в вашем объекте. [в этом случае свойство — это что-то]

Надеюсь, это поможет

Ответ №4:

это то, что сработало для меня

 const displayUserPhotoAndName = (data) => {
            if(!data) return;
            // add your code here
            const {results} = data;
          const [profile] = [...results];

            const fullName = profile.name.title   ' '   profile.name.last   ' '   profile.name.first;

      document.getElementById('name').innerHTML = fullName
       document.getElementById('photo').src = profile.picture.large
            displayExtraUserInfo(profile);

            clearNotice();
          };

Ответ №5:

const {profile} = results; здесь profile undefined потому results , что это массив без профиля свойств.

Вам нужно сделать const profile = [...results]; , а затем document.getElementById('name').innerHTML = profile[0].name.title profile[0].name.first profile[0].name.last;

 fetch('https://randomuser.me/api/')
  .then(res => res.json())
  .then(data => {
      if (!data) return;
      const {
        results
      } = data;
      const profile = [...results];
      console.log(profile)
      document.getElementById('name').innerHTML =  profile[0].name.title   profile[0].name.first   profile[0].name.last;
    }

  )

 <div id="name"></div>