Ionic — анализировать содержимое JSON и отображать его в модальном контроллере

Я работаю над Ionic и хочу отобразить содержимое разбора JSON (URL) в модальном компоненте. Мне удалось получить содержимое запроса JSON, но когда я пытаюсь вставить его в модальное окно, он возвращает неопределенное значение.

Вот фрагмент:

async openModal() {
  this.http.get(URL).subscribe(
    (data) => {
      var URLparsed = data['features'][0]['properties']['nom_dep'];
      console.info(URLparsed); // returns the content, that's ok
      this.URLparsed2 = URLparsed;
    },
    (error) => {
      console.info(error);
    },
  );

  console.info('verif : ' + this.URLparsed2); // returns undefined

  const modal2 = await this.modalCtrl.create({
    component: Modal2Page,
    cssClass: 'my-custom-class',
    componentProps: {
      URL: this.URLparsed2,
    },
  });

  return await modal2.present();
}

Я должен администратор, я застрял на этом шаге. Есть идеи?
Любая помощь будет очень признательна.
Спасибо !

Пожалуйста, делайте правильный отступ в коде, чтобы его было легче читать.

Marco 16.12.2020 13:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
164
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

HTTP.get является асинхронным.

console.info(URLparsed); // returns the content, that's ok это вызов после console.info("verif : " + this.URLparsed2); // returns undefined

Вы можете преобразовать RxJs Observable, возвращаемые методом get(), в Promise, а затем дождаться разрешения этого промиса.

async openModal() {
    let data = await this.http.get(URL).toPromise();

    var URLparsed = (data['features'][0]['properties']['nom_dep']);
    console.info(URLparsed); // returns the content, that's ok
    this.URLparsed2 = URLparsed;

    console.info("verif : " + this.URLparsed2);

    const modal2 = await this.modalCtrl.create({
        component: Modal2Page,
        cssClass: 'my-custom-class',
        componentProps: {
            'URL': this.URLparsed2, 
        }
    });

    return await modal2.present(); 
}

Этот код является примером и не тестировался.

Я проверил ваш код, и это именно то, что мне нужно! Большое спасибо @Марко !!

Julien 17.12.2020 11:17

Другие вопросы по теме