見出し画像

Swiftで行こう!--SwiftUI:CodableでJsonを。

参考に自分でやってみます。

まず、Json

let todosEndpoint = "https://jsonplaceholder.typicode.com/todos/"

拝借しました。

そしてCodable、

struct Todo:Codable,Identifiable {
   let userId,id:Int
   let title:String
   let completed:Bool
}

そして、

typealias Todos = [Todo]
class TodoDownloader:ObservableObject{
   @Published var todos:Todos = [Todo]()
   
   init() {
       guard let url = URL(string: todosEndpoint) else {return}
       URLSession.shared.dataTask(with: url){(data,response,error) in
           do{
               guard let data = data else{return}
               let todos = try JSONDecoder().decode(Todos.self,from: data)
               DispatchQueue.main.async {
                   self.todos = todos
               }
           }catch{
               print("error")
           }
           
       }.resume()
   }
}

デコードします。resume()を忘れずに。

最後に表示部分。

struct ContentView : View {
   @ObservedObject var todoData = TodoDownloader()
   var body: some View {
       NavigationView{
           List(self.todoData.todos){ todo in
               VStack(alignment: .leading){
                 Text(todo.title)
                 Text(String(todo.id))
                   
               }
               
           }
           .navigationBarTitle(Text("Todo"))
       }
   }
}

Listで表示させます。その時Navigationでタイトルも入れています。

.navigationBarTitle(Text("Todo"))

ですね。

List(self.todoData.todos){ todo in
               VStack(alignment: .leading){
                 Text(todo.title)
                 Text(String(todo.id))
                   
               }
               
           }

ですが、

VStack(alignment: .leading)

で縦方向に前揃えで表示させます。title,id番号を表示させます。なんとか画面にリスト表示されました。

この記事が気に入ったらサポートをしてみませんか?