HƯỚNG DẪN LOAD DỮ LIỆU TỪ JSON VÀO TABLEVIEW Ở bài trước mình đã hướng dẫn cho các bạn cách làm thế nào để đọc json từ web Service và trả về các API.. Tiếp theo trong hướng dẫn này mình
Trang 1HƯỚNG DẪN LOAD DỮ LIỆU TỪ JSON VÀO
TABLEVIEW
Ở bài trước mình đã hướng dẫn cho các bạn cách làm thế nào để đọc json từ web Service và trả về các API
Tiếp theo trong hướng dẫn này mình sẽ giúp các bạn làm thế nào để load dữ liệu từ Json vào tableView
Để đơn giản bài này mình sẽ giúp các bạn:
1, Đọc title tên bài hát
2, Đọc file ảnh lên
đây là đoạn mã json chúng ta đọc ở bài trước:
1 favorites = (
2 {
3 artist = Brandy;
4 "image_large" = "https://i.scdn.co/image/8a161e85351a20aaf4f4099cc89e1b8fb726e035";
5 "image_medium" = "https://i.scdn.co/image/3f3b3c7e4d4feabb73c885b38500d1427260ae33";
6 "image_small" = "https://i.scdn.co/image/4dcf0d5722e62cdfaf620a773f010e6b2dd15b78";
7 "open_url" = "https://open.spotify.com/track/6esN4GvN6uRe1SVVNElHDq";
8 "preview_url" = "https://p.scdn.co/mp3-preview/33add4c82a52fbaf7665b8dee3da1c73b2406775";
9 "song_id" = 54dd0bc8a57fa90c00770523;
10 title = "I Wanna Be Down - Single Version";
11 },
12 {
13 artist = "Destiny's Child";
14 "image_large" = "https://i.scdn.co/image/bf0f79acd50add01e88575664fe98d8d44d3123f";
15 "image_medium" = "https://i.scdn.co/image/a7aef2e8232955bb94d7c041a0fbc06b2bb8fe7f";
16 "image_small" = "https://i.scdn.co/image/fdf76dbe620b71af39d775274795c0ca2829c19f";
17 "open_url" = "https://open.spotify.com/track/72oq9xR8MK5CLpI185xaVy";
18 "preview_url" = "https://p.scdn.co/mp3-preview/ca5baaecfef5ce51277e105f71a8d63240b734d8";
19 "song_id" = 54dd0bc8a57fa90c00770606;
20 title = Survivor;
21 },
22 {
23 artist = Fischerspooner;
24 "image_large" = "https://i.scdn.co/image/bbae0384d6c3003efe6b913320be17d2236a7ed9";
25 "image_medium" = "https://i.scdn.co/image/2e1a1eca7d08deead66e837e07cc434fe8b0262d";
26 "image_small" = "https://i.scdn.co/image/f2e566ac0da74bbb65bb0d734a7b8a3366bf4997";
27 "open_url" = "https://open.spotify.com/track/4etezwvjIhth11BG1SGCgs";
28 "preview_url" = "https://p.scdn.co/mp3-preview/198d749dbeffcbe3e2a63c3d85f0b07fb9539e35";
29 "song_id" = 54dd0bc8a57fa90c007705ba;
30 title = "Never Win";
31 },
32 {
Trang 233 artist = "Kid Sister";
34 "image_large" = "https://i.scdn.co/image/a4342e2a38b294db0775d699138af0902fabf25f";
35 "image_medium" = "https://i.scdn.co/image/5b17e76a08d1577d900454c4ad2a68313245aa13";
36 "image_small" = "https://i.scdn.co/image/3d1c9c17285ffbc91c97d865f6c7e63edfb972c2";
37 "open_url" = "https://open.spotify.com/track/7gjsO6qOYqTEXqZJrbIaOG";
38 "preview_url" = "https://p.scdn.co/mp3-preview/3edf28271aaa8dbe07496c0f341633d91e779723";
39 "song_id" = 54dd0bc8a57fa90c0077062b;
40 title = Control;
41 },
42 {
43 artist = "Ellie Goulding";
44 "image_large" = "https://i.scdn.co/image/1a3ca29c2f93fa50f72df85b1a94f62383dbc5cd";
45 "image_medium" = "https://i.scdn.co/image/253be50ddceb82345cc02d13f68711b1de185936";
46 "image_small" = "https://i.scdn.co/image/84496c2807804327b59add2b6bd3957badf74083";
47 "open_url" = "https://open.spotify.com/track/6Ks02PwRawUTDwGyboe0Fc";
48 "preview_url" = "https://p.scdn.co/mp3-preview/4af7f000411b8959efb6ca6530157752f362abcd";
49 "song_id" = 54dd0bc8a57fa90c00770574;
50 title = "Lights (Single Version)";
51 },
52 {
53 artist = Ladyhawke;
54 "image_large" = "https://i.scdn.co/image/a7d927e5fc59da3923d06d61b7649c0144561481";
55 "image_medium" = "https://i.scdn.co/image/845665ec2f35b397c44464f4b8e183faaf11550c";
56 "image_small" = "https://i.scdn.co/image/b1037dc2edcf2b4e2c8624e7591580e1d46bd9c7";
57 "open_url" = "https://open.spotify.com/track/5eStaIpPvDJCMrWELkSAp5";
58 "preview_url" = "https://p.scdn.co/mp3-preview/dad0c35fa3953a720208f1d6d0231c68a139e7db";
59 "song_id" = 54dd0bc8a57fa90c007705c7;
60 title = "Back Of The Van";
61 },
62 {
63 artist = "Luther Vandross";
64 "image_large" = "https://i.scdn.co/image/b2210635a2334ffbba99792888b5a4d25041c228";
65 "image_medium" = "https://i.scdn.co/image/499e378a14c8d66601cb764b8b2cd17aa1b82b89";
66 "image_small" = "https://i.scdn.co/image/d2b34a04398f4b42236191fab1cc91996577d286";
67 "open_url" = "https://open.spotify.com/track/3Bb9jzYKHSOmEM1tikLd6V";
68 "preview_url" = "https://p.scdn.co/mp3-preview/3660756c15a4741a9b0671c512b8ce8084eb4590";
69 "song_id" = 54dd0bc8a57fa90c00770641;
70 title = "Dance With My Father";
71 },
72 {
73 artist = "Ne-Yo";
74 "image_large" = "https://i.scdn.co/image/00a3bb46c61c035ddb47502b71da4f062c82804d";
75 "image_medium" = "https://i.scdn.co/image/149d0bbd504d0c919da20152636c5dbc8cbb365b";
76 "image_small" = "https://i.scdn.co/image/a5e4ed0bc57c4664bb1c8720cc9f7adefd35dca0";
77 "open_url" = "https://open.spotify.com/track/2dQAJjOAePdj8hLE88Qp5L";
78 "preview_url" = "https://p.scdn.co/mp3-preview/db2e8fbdb875b4c6fca354d2831fe050317edb7f";
79 "song_id" = 54dd0bc8a57fa90c007704fe;
80 title = "Miss Independent";
81 },
82 {
83 artist = "Brooks & Dunn";
84 "image_large" = "https://i.scdn.co/image/aec75b35408f3d3371d183f94adf872c39d04ba3";
85 "image_medium" = "https://i.scdn.co/image/a83cfbb35e373129720883eefc750fa11b269108";
Trang 386 "image_small" = "https://i.scdn.co/image/1336210e9131e57c69e82967def09d45f4b38d1a";
87 "open_url" = "https://open.spotify.com/track/09qzRI951OVkXGCc33gzcT";
88 "preview_url" = "https://p.scdn.co/mp3-preview/a3405fc8f47de7e9e06a49b8293668dd554af401";
89 "song_id" = 54dd0bc8a57fa90c007704e3;
90 title = "My Maria";
91 },
92 {
93 artist = "Mila J";
94 "image_large" = "https://i.scdn.co/image/93df01f3f7b2080f924b0c4890a82751e16fa8aa";
95 "image_medium" = "https://i.scdn.co/image/e97f7b416871f420377e58f1d6d7dec13d7ccb59";
96 "image_small" = "https://i.scdn.co/image/f12516b1e7d165c403a41dfb7a931741a17041b1";
97 "open_url" = "https://open.spotify.com/track/7slZeIUsewMBnkMXT1RWoh";
98 "preview_url" = "https://p.scdn.co/mp3-preview/02816213ba85a87b87f1fead3297448684298988";
99 "song_id" = 54dd0bc8a57fa90c00770601;
100 title = "Smoke, Drink, Break-Up";
101 },
102 {
103 artist = "Luke Bryan";
104 "image_large" = "https://i.scdn.co/image/beb2a1636debd37a16c03a787ea962add845eccb";
105 "image_medium" = "https://i.scdn.co/image/045e857dc7d9643ed309fc0b3c5c1bb9d6fe427d";
106 "image_small" = "https://i.scdn.co/image/36dad0b9096e1da60518b851eb6a3ca6942143cf";
107 "open_url" = "https://open.spotify.com/track/3xn2DXsMWxeJKNiG6IYZsk";
108 "preview_url" = "https://p.scdn.co/mp3-preview/779229ac7ca042ce3c2a4d710458665a4c3e4e44";
109 "song_id" = 54dd0bc8a57fa90c007704c8;
110 title = "What Country Is";
111 },
112 {
113 artist = Alesso;
114 "image_large" = "https://i.scdn.co/image/33708105136c9c996aba5c7f75a55c5e412adfe1";
115 "image_medium" = "https://i.scdn.co/image/50425bd18161ae9ca646c6286c8fa2bbf2026569";
116 "image_small" = "https://i.scdn.co/image/f31193dec0fef99fdb6383e618d29c2bea051942";
117 "open_url" = "https://open.spotify.com/track/7rwaGOl65pF5TtW0CxV3HJ";
118 "preview_url" = "https://p.scdn.co/mp3-preview/948ac7e96bc2f9ca2280fbab8ffb9f0943d50788";
119 "song_id" = 54dd0bc8a57fa90c00770639;
120 title = "If I Lose Myself";
121 },
122 {
123 artist = "Marc Ribot";
124 "image_large" = "https://i.scdn.co/image/1606d9ec7ff6c90bd4cf26546a02aab0054d337a";
125 "image_medium" = "https://i.scdn.co/image/582f04eed1e9a87aa33667dddcb4f784c56030a1";
126 "image_small" = "https://i.scdn.co/image/8eb8ffb9a55516a8d324626b288c5c3e0dea31c6";
127 "open_url" = "https://open.spotify.com/track/6AMnK19NuloZd3SP78mNic";
128 "preview_url" = "https://p.scdn.co/mp3-preview/950c0b08bf6140b47818f5a382d1cdf3570d3859";
129 "song_id" = 54dd0bc8a57fa90c007705f5;
130 title = Bateau;
131 },
132 {
133 artist = "Trace Adkins";
134 "image_large" = "https://i.scdn.co/image/5623dd558033082bdee23baee062b3860e2dc9de";
135 "image_medium" = "https://i.scdn.co/image/3729ec348ff835cd3b8d7d05825dfa1f49c375d2";
136 "image_small" = "https://i.scdn.co/image/01bec368c5c874934000205803c5febe12374c7f";
137 "open_url" = "https://open.spotify.com/track/7l2mYsNQu8zxQ54mcsiXMX";
138 "preview_url" = "https://p.scdn.co/mp3-preview/edce600d6ace9367fc12b2a9c873ef08023bf6e6";
Trang 4139 "song_id" = 54dd0bc8a57fa90c007704e1;
140 title = Swing;
141 },
142 {
143 artist = "The Naked And Famous";
144 "image_large" = "https://i.scdn.co/image/4b8100bab1d9590097b67550777ecef07e78997a";
145 "image_medium" = "https://i.scdn.co/image/8130d5a147ee9792cff7a9a23376ac56ff45a01b";
146 "image_small" = "https://i.scdn.co/image/962a6b9cec416d4b1a683481fa92f6caeac99f2b";
147 "open_url" = "https://open.spotify.com/track/25pnOZSMwZBU7PAgaDS5yi";
148 "preview_url" = "https://p.scdn.co/mp3-preview/6e4990a23ebf97f00016d2f670da0065164c2e67";
149 "song_id" = 54dd0bc8a57fa90c00770555;
150 title = "Young Blood";
151 },
152 {
153 artist = "Gwen Stefani";
154 "image_large" = "https://i.scdn.co/image/5e1c2c47bab93b8d2db21d6fd96f6a7f1d167bff";
155 "image_medium" = "https://i.scdn.co/image/0b49d63cad634f967cda9e786abc1496ad6457bf";
156 "image_small" = "https://i.scdn.co/image/d3ff468f81747eae2bf854e65eaafc596dd5d286";
157 "open_url" = "https://open.spotify.com/track/5WguijCseCBLdm67oK6wxQ";
158 "preview_url" = "https://p.scdn.co/mp3-preview/839903b38c82726f4a2a48fa90f5b43e75e13f2c";
159 "song_id" = 54dd0bc8a57fa90c00770531;
160 title = "Hollaback Girl";
161 },
162 {
163 artist = Dio;
164 "image_large" = "https://i.scdn.co/image/dd09f80774d71a6bf6d9e64b883b817617399f8a";
165 "image_medium" = "https://i.scdn.co/image/b2957d55a6edc4f7c6e89fca8acea036f6179ac0";
166 "image_small" = "https://i.scdn.co/image/e19e63a60bd554e4b450f884fb370ad143e8de3d";
167 "open_url" = "https://open.spotify.com/track/4w3aNK1WlBwSLtIA0oyLBt";
168 "preview_url" = "https://p.scdn.co/mp3-preview/f19c85405fa046aec012b16a8bd37fe2847a5006";
169 "song_id" = 54dd0bc8a57fa90c0077065e;
170 title = "We Rock";
171 },
172 {
173 artist = "Florida Georgia Line";
174 "image_large" = "https://i.scdn.co/image/83cea4f107695769d107ed2cb214f3ec6908a1bd";
175 "image_medium" = "https://i.scdn.co/image/a99db44ed24fa2d9ad6dbebeff5fc0cf878b89b6";
176 "image_small" = "https://i.scdn.co/image/586fa6b478fde2705f57f0665ace2d474c7a2678";
177 "open_url" = "https://open.spotify.com/track/1XPMs9Qm63aOGZ7l0vYgy5";
178 "preview_url" = "https://p.scdn.co/mp3-preview/b6fcb34a4982db2b04aad60e37e2d8c502a189eb";
179 "song_id" = 54dd0bc8a57fa90c00770595;
180 title = "Round Here";
181 },
182 {
183 artist = "Angel Haze";
184 "image_large" = "https://i.scdn.co/image/6f9e0ffe9c9e5419f94c6393d431fcc936a63cf9";
185 "image_medium" = "https://i.scdn.co/image/25bc68682340006926a27ad8f5485ef592131b48";
186 "image_small" = "https://i.scdn.co/image/7521c80c241c579a9ea37e4366df9774c6108f54";
187 "open_url" = "https://open.spotify.com/track/5NkVKO5bGag9F4BARCZk3H";
188 "preview_url" = "https://p.scdn.co/mp3-preview/05e8647fee917ab464850cdb6fa1ff2798ee2bc4";
189 "song_id" = 54dd0bc8a57fa90c0077061c;
190 title = "Werkin' Girls";
191 },
Trang 5192 {
193 artist = "R Kelly";
194 "image_large" = "https://i.scdn.co/image/25e552b5f8731e513db2d4d0a1aab327e3d949bc";
195 "image_medium" = "https://i.scdn.co/image/be2928b658a74b815624b089a3808eb660ffd3bb";
196 "image_small" = "https://i.scdn.co/image/3f388a9364ef0e8188873f4f5aa068840f2d7dee";
197 "open_url" = "https://open.spotify.com/track/6gHpWdXP2cgOhCt4Qe1txI";
198 "preview_url" = "https://p.scdn.co/mp3-preview/1f5d6ca2269714055674a8a75a86ae9d9e1f931d";
199 "song_id" = 54dd0bc8a57fa90c00770524;
200 title = "When A Woman's Fed Up";
201 },
202 {
203 artist = "Florence + The Machine";
204 "image_large" = "https://i.scdn.co/image/49cb3777297b69bb88c82abe1ea0d9ae8591ba13";
205 "image_medium" = "https://i.scdn.co/image/c68c814e2d5bac478d89060e1221d584dd64afa5";
206 "image_small" = "https://i.scdn.co/image/abe9a6ee3a6fe58442e05f63e6d0f68ef6ed85b4";
207 "open_url" = "https://open.spotify.com/track/7mpSKT7h6p12YqppsvbMGw";
208 "preview_url" = "https://p.scdn.co/mp3-preview/66ea51007160acf9ae53ebf1cf0bca15b4ff865a";
209 "song_id" = 54dd0bc8a57fa90c00770564;
210 title = "Shake It Out";
211 },
212 {
213 artist = Dio;
214 "image_large" = "https://i.scdn.co/image/dd09f80774d71a6bf6d9e64b883b817617399f8a";
215 "image_medium" = "https://i.scdn.co/image/b2957d55a6edc4f7c6e89fca8acea036f6179ac0";
216 "image_small" = "https://i.scdn.co/image/e19e63a60bd554e4b450f884fb370ad143e8de3d";
217 "open_url" = "https://open.spotify.com/track/7zfELzsiLpEy1qGGdTHbYL";
218 "preview_url" = "https://p.scdn.co/mp3-preview/47a1a30bc67aa42f1762de71504cc83e55269c4d";
219 "song_id" = 54dd0bc8a57fa90c0077064c;
220 title = "The Last In Line";
221 },
222 {
223 artist = Journey;
224 "image_large" = "https://i.scdn.co/image/b06e3c992e0f5c8b1333156f6c6e970c63979831";
225 "image_medium" = "https://i.scdn.co/image/99ca079c3e371e25d85e5fa3c0bb4c0507e2e340";
226 "image_small" = "https://i.scdn.co/image/a96dc5a85b6fca75c953ecffb68ff7822899294a";
227 "open_url" = "https://open.spotify.com/track/0SX3NGWlnGuVrp7bx0TaW3";
228 "preview_url" = "https://p.scdn.co/mp3-preview/5143697bf4ecc4edebab728edcc359bd3558ebb6";
229 "song_id" = 54dd0bc8a57fa90c007704c5;
230 title = "Separate Ways";
231 }
232 );
233 "session_id" = 56c440c9e747e31100274a86;
234 username = hiep;
235 }
Với tham số truyền vào là hiệp! Ở đây tôi đơn giản là làm với session !!! chúng ta thay đổi đoạn mã sau!
để tham số truyền vào là method và para và trả về một block còn c
Trang 61 -void)urlSession:(NSString*)method paras:(NSDictionary *)para: (void(^)(NSError *error,NSDictionary
*dictInfor))completion{
2 NSURL *url=[NSURL URLWithString:@"https://ionic-songhop.herokuapp.com/login"];
3 NSMutableURLRequest *request= [NSMutableURLRequest requestWithURL:url];
4 [request setHTTPMethod:method];
5 if (para!=nil){
6 NSMutableArray *endcodeParaCompos =[[NSMutableArray alloc]init];
7 for (NSString *key in para){
8 [endcodeParaCompos addObject:[NSString stringWithFormat:@"%@=%@",key,para[key]]];
9 }
10 NSData *encodeParas=[[endcodeParaCompos componentsJoinedByString:@"&"]
dataUsingEncoding:NSUTF8StringEncoding];
11 [request setValue:@"application/x-www-form-urlencoded" forHTTPHeaderField:@"Content-Type"];
12 [request setValue:[NSString stringWithFormat:@"%d",(int)encodeParas.length] forHTTPHeaderField:@ "Content-Length"];
13 request.HTTPBody=encodeParas;
14 }
15
16 NSURLSessionDataTask *task=[[NSURLSession sharedSession]dataTaskWithRequest:request
completionHandler:^(NSData * data, NSURLResponse *response, NSError *error){
17 NSError *errorData;
18 if (error==nil){
19 NSDictionary *conten=[NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:&errorData];
20 if (errorData==nil){
21 completion(nil,conten);
22 }else{
23 NSString *contenError=[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
24 completion(error,nil);
25 }
26 }
27 }];
28 [task resume];
29 }
ok mình sẽ thiết kế giao diện như sau:
Trang 7tạo naviagation cho ViewController
tạo một viewController mới và Kéo từ NSURLSession đến viewcontroller vừa tạo
tạo class inforViewController quản lý ViewController vừa tạo ra! kết nối class
Tại inforViewController ta thêm tableView và thêm tablewViewCell, thêm image và
label cho TableViewCell!
Ở đây mình không hướng dẫn cụ thể lại mà chỉ rõ các UI cần làm!!!
đặt identifine cho cell là “cell”
Kết nối delegate, dataSource cho tableView !
đăng ký delegate,dataSource cho inforViewController
Ánh xạ tablewView sang class quản lý!
tạo class contenView quản lý label và image!và ánh xạ chúng sang
Để tiếp kiệm thời gian bạn tải dự án mẫu tại đây:
Trang 81 http://www.mediafire.com/download/9l7ddcz3c0mdl42/Json+4.zip
tại file “inforViewController.h”
1 #import "ViewController.h"
để tạo đối tượng gọi đến session!
– Đầu tiên tạo tham số truyền vào và mehtod!
tạo một đối tượng controller , trong block chúng ta không được quản lý bộ nhớ theo Strong mà phải quản lý theo weak để app không bị treo OK để hiểu rõ quản lý bộ nhớ mình sẽ hướng dẫn các bạn sau!
1 - (void)viewDidLoad {
2 [super viewDidLoad];
3 NSDictionary *key=@{@"username":@"hiep"};
4 NSString *method=@"POST";
5 ViewController *controller=[[ViewController alloc] init];
6 weak inforViewController *weakSelf=self;
7 [controller urlSession:method paras:key :^(NSError *error, NSDictionary *dictInfor){
8 [[NSOperationQueue mainQueue]addOperationWithBlock:^{
9 weakSelf.favorites=dictInfor[@"favorites"];
10 NSLog(@"%@",dictInfor);
11 [weakSelf.tableView reloadSections:[NSIndexSet indexSetWithIndex:0]
withRowAnimation:UITableViewRowAnimationAutomatic];
12 }];
13
14 }];
15 }
controller gọi đến hàm urlSession và tuyền vào tham số! method Khi dữ liệu tải về lưu trong dictInfor Khi nào dữ liệu tải về thành công mình sẽ trả về block để reloadSesions Lưu ý phải dùng NSOperationQueue khi đó dữ liệu tải thành công mới load vào
tableView nếu không tableView sẽ bị chờ load dữ liệu
Tiếp theo mình cần làm việc với bảng dữ liệu! có 2 phương thức bắt buộc trong
tablewView:
– Trả về số lượng Row trong một section
1 -NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
2 return [self.favorites count];
3 }
Trang 9– Trả về data cho tablewView:
Ở đây để đơn giản đầu tiên mình trả về title các bài hát !
tableView dùng như thế nào mình đã hướng dẫn ở các bài trước
do json trả về là một mảng các NSDictionary nên ta tạo một đối tượng item mỗi lần gọi row item được gán lại giá trị
Json trả về title có key =”title”
1 -UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
2 contenView *cell=[tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
3 NSDictionary *item=self.favorites[indexPath.row];
4 cell.labelText.text=item[@"title"];
5 return cell;
6 }
biên dịch và chạy thử ta sẽ được kết quả như hình:
Trang 10
Load ảnh vào imageView:
do Json trả về ảnh là các đường dẫn , mà imageView hỗ trợ load ảnh từ data, truyền vào data chuyển đổi thành UIImage
Thêm đoạn mã sau: load tương tự như API ban đầu tham số truyền vào là đường dẫn ảnh và trả về block lưu trữ UIImage
1 -void) loadImage:(NSString *)strUrl API:(void (^)(UIImage *iconImage))completion{
2 NSURL*url=[NSURL URLWithString:strUrl];
3 NSURLRequest *request=[NSURLRequest requestWithURL:url];
4 NSURLSessionTask*task=[[NSURLSession sharedSession]dataTaskWithRequest:request completionHandler:^(NSData
* _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error){
5 if (error==nil){
6 UIImage *image=[UIImage imageWithData:data];
7 completion(image);