Узнайте, как создать вызов API для получения данных из удаленного файла JSON и отображения этих данных в списке SwiftUI. Давайте начнем!
Сложность: Начинающий | Легко | Нормальный | Испытывающий
Среда: Xcode 12 и SwiftUI
Начать новый проект Xcode
Откройте Xcode ›Создайте новый проект Xcode› Шаблон приложения ›Назовите его userJSON и выберите интерфейс и жизненный цикл SwiftUI.
Получите онлайн-API
Перейдите на сайт JSONPlaceholder, мы собираемся использовать этот URL-адрес JSON для отображения данных в нашем списке. Как видите, это набор из 10 элементов, содержащих массив данных.
Создать модель
Создайте файл Swift с именем userModel и скопируйте / вставьте в него следующий код:
Это структура, которую мы собираемся использовать для нашего приложения. Идентификатор, имя пользователя и имя будут соответствовать тем, которые присутствуют в файле JSON. Не стесняйтесь добавлять больше, например адрес электронной почты, телефон, веб-сайт и т. Д.
Создайте ViewModel
Теперь мы собираемся создать файл для выполнения вызовов API между нашим приложением и файлом JSON, декодировать его и получить данные. Создайте другой файл Swift, на этот раз назовите его userViewModel и вставьте код ниже:
Давайте представим этих пользователей!
Маленькая хитрость:
Перед созданием пользовательского интерфейса стоит проверить, правильно ли был выполнен вызов API. Я рекомендую вам позвонить прямо сейчас с помощью метода onAppear (). Напишите переменную состояния для установления связи между нашим ContentView и View. Поместите метод onAppear () сразу после текста.
@State var пользователи: [User] = []
.onAppear {
apiCall (). getUsers {(пользователи) в
self .users = пользователи
}
}
Как видите, отладчик печатает всех пользователей с идентификатором, именем и фамилией, а это значит, что мы в порядке!
Чтобы отобразить всех пользователей в списке, замените текущий Text на List, например:
Запустите ваше приложение 🏃♂️
Теперь запустите приложение, и вы увидите список пользователей:
Заключение:
Спасибо за внимание! Для декодирования удаленного JSON с помощью Swift требуется всего несколько строк кода, а создание пользовательского интерфейса с помощью SwiftUI - легкий ветерок! Для вашего проекта убедитесь, что вы используете правильный формат в вашей модели, соответствующий файлу JSON, так как это распространенная ошибка.
Я всегда рад поболтать и поработать на [email protected]. Рассмотрите возможность подписки, чтобы получить неограниченный доступ к моим статьям и всему Medium через мою реферальную ссылку.
Полный код доступен здесь:
