1
00:00:01,609 --> 00:00:04,900
‫-: [Jonas Schmedtman] Quindi abbiamo già per i modelli HTML.

2
00:00:04,900 --> 00:00:07,790
‫Ora arriva la parte più difficile,

3
00:00:07,790 --> 00:00:11,643
‫ovvero sostituire effettivamente i segnaposto con il contenuto.

4
00:00:13,450 --> 00:00:16,610
‫Quindi iniziamo effettivamente con la panoramica.

5
00:00:16,610 --> 00:00:19,680
‫E qui diamoci un po' di respiro

6
00:00:19,680 --> 00:00:21,543
‫e aggiungiamo qualche commento.

7
00:00:21,543 --> 00:00:23,350
‫(digitando su una

8
00:00:23,350 --> 00:00:27,943
‫tastiera) Quindi pagina panoramica e alcuni commenti qui sotto.

9
00:00:30,790 --> 00:00:35,790
‫Quindi la pagina del prodotto, e qui abbiamo l'API.

10
00:00:39,079 --> 00:00:42,079
‫E poi qui abbiamo il Non trovato.

11
00:00:45,650 --> 00:00:48,990
‫Va bene, quindi sembra già un po' meglio.

12
00:00:48,990 --> 00:00:52,820
‫Quindi, di nuovo, iniziamo con la pagina di panoramica.

13
00:00:52,820 --> 00:00:54,100
‫Quindi il

14
00:00:54,100 --> 00:00:58,580
‫primo passo è caricare effettivamente la panoramica del modello.

15
00:00:58,580 --> 00:01:01,770
‫Ok, quindi ogni volta che c'è una nuova

16
00:01:01,770 --> 00:01:05,340
‫richiesta per questo percorso, quindi il percorso modificato o

17
00:01:05,340 --> 00:01:08,180
‫/Panoramica, la prima cosa che

18
00:01:08,180 --> 00:01:11,240
‫faremo è leggere la panoramica del modello.

19
00:01:11,240 --> 00:01:14,020
‫Ma, proprio come prima, possiamo davvero

20
00:01:14,020 --> 00:01:16,860
‫farlo al di fuori di questo callback, ok?

21
00:01:16,860 --> 00:01:20,000
‫Poiché questi modelli, saranno sempre gli stessi,

22
00:01:20,000 --> 00:01:22,050
‫quindi puoi effettivamente leggerli

23
00:01:22,050 --> 00:01:25,280
‫nella memoria proprio all'inizio quando avviamo l'applicazione.

24
00:01:25,280 --> 00:01:28,270
‫E poi, quando necessario, andiamo semplicemente

25
00:01:28,270 --> 00:01:31,460
‫avanti e sostituiamo i contenuti lì dentro.

26
00:01:31,460 --> 00:01:34,156
‫Ok, proprio come abbiamo fatto con i dati

27
00:01:34,156 --> 00:01:36,720
‫qui, non è necessario leggere i dati

28
00:01:36,720 --> 00:01:38,528
‫ogni volta che c'è

29
00:01:38,528 --> 00:01:41,403
‫una richiesta e lo stesso accade per i modelli.

30
00:01:42,240 --> 00:01:43,120
‫Va bene?

31
00:01:43,120 --> 00:01:44,510
‫Quindi in realtà andrò

32
00:01:44,510 --> 00:01:47,090
‫avanti e lo farò per tutti e tre i

33
00:01:47,090 --> 00:01:49,260
‫modelli qui in modo da toglierlo di mezzo.

34
00:01:49,260 --> 00:01:54,260
‫Quindi vado avanti, e solo per ottenere questo, lo chiamo temp

35
00:01:55,610 --> 00:01:57,040
‫per la

36
00:01:59,000 --> 00:02:02,490
‫panoramica del modello e il nome DAR

37
00:02:03,670 --> 00:02:05,743
‫e qui abbiamo i modelli.

38
00:02:09,370 --> 00:02:13,213
‫E poi /template-overview.

39
00:02:15,460 --> 00:02:18,390
‫Ok, allora duplicalo qui due volte in modo

40
00:02:19,510 --> 00:02:20,650
‫che ne

41
00:02:22,320 --> 00:02:24,683
‫abbiamo uno per la carta, quindi

42
00:02:26,980 --> 00:02:29,983
‫template-card, e poi uno per il prodotto modello.

43
00:02:35,460 --> 00:02:37,780
‫Prodotto, va bene.

44
00:02:37,780 --> 00:02:39,870
‫E ancora, tieni presente che possiamo

45
00:02:39,870 --> 00:02:42,380
‫fare con la versione sincronizzata perché siamo nel

46
00:02:42,380 --> 00:02:43,950
‫codice di primo livello.

47
00:02:43,950 --> 00:02:47,400
‫Abbiamo eseguito solo una volta, proprio all'inizio

48
00:02:47,400 --> 00:02:50,080
‫quando carichiamo queste applicazioni.

49
00:02:50,080 --> 00:02:53,156
‫Quindi non abbiamo potuto farlo all'interno di

50
00:02:53,156 --> 00:02:55,970
‫questa funzione di callback createServer, ok?

51
00:02:55,970 --> 00:02:59,350
‫Perché questo viene chiamato ogni volta che c'è una richiesta.

52
00:02:59,350 --> 00:03:03,047
‫E se abbiamo un milione di richieste contemporaneamente, potremmo

53
00:03:03,047 --> 00:03:06,330
‫bloccare il codice un milione di volte, una

54
00:03:06,330 --> 00:03:08,040
‫per ogni richiesta.

55
00:03:08,040 --> 00:03:11,450
‫Ed è qualcosa che non vogliamo.

56
00:03:11,450 --> 00:03:14,580
‫Quindi, la panoramica, andiamo avanti e

57
00:03:14,580 --> 00:03:16,740
‫prima di tutto

58
00:03:16,740 --> 00:03:21,010
‫solo per testarla, invia questo tempOverview come risposta.

59
00:03:21,010 --> 00:03:22,120
‫Ora, prima di

60
00:03:22,120 --> 00:03:26,853
‫poterlo fare, dobbiamo andare avanti e impostare questo tipo di contenuto su HTML.

61
00:03:27,740 --> 00:03:30,453
‫Quindi fammi effettivamente copiare questo pezzo di codice qui.

62
00:03:32,400 --> 00:03:34,120
‫Quindi il codice di stato

63
00:03:34,120 --> 00:03:37,063
‫è 200 e il tipo di contenuto dovrebbe essere text/html.

64
00:03:42,250 --> 00:03:44,040
‫Quindi riavvia il server

65
00:03:45,010 --> 00:03:47,943
‫qui e ora diamo un'occhiata, e infatti,

66
00:03:49,070 --> 00:03:50,670
‫eccoci qui.

67
00:03:50,670 --> 00:03:52,650
‫Quindi ecco la nostra

68
00:03:53,710 --> 00:03:56,700
‫pagina in stile che già conosciamo da questa.

69
00:03:56,700 --> 00:03:58,630
‫Ora quello che ovviamente

70
00:03:58,630 --> 00:04:01,031
‫manca qui sono queste righe, e

71
00:04:01,031 --> 00:04:03,770
‫questo perché abbiamo ancora il nostro segnaposto.

72
00:04:03,770 --> 00:04:08,110
‫E quindi il prossimo compito è ora sostituire questo segnaposto con le

73
00:04:08,110 --> 00:04:09,293
‫carte effettive.

74
00:04:10,830 --> 00:04:12,560
‫E come lo faremo?

75
00:04:12,560 --> 00:04:15,640
‫Bene, ricorda che in data object, abbiamo un

76
00:04:15,640 --> 00:04:19,010
‫array di tutti gli oggetti che sono in

77
00:04:19,010 --> 00:04:20,573
‫data. JSON.

78
00:04:21,620 --> 00:04:26,560
‫Quindi, tutti questi cinque oggetti, tutti in oggetti JavaScript, perché abbiamo

79
00:04:26,560 --> 00:04:31,000
‫già analizzato questi dati con solo una stringa.

80
00:04:31,000 --> 00:04:31,833
‫Va bene?

81
00:04:31,833 --> 00:04:34,150
‫Quindi l'oggetto dati è di nuovo

82
00:04:34,150 --> 00:04:36,450
‫un array di cinque oggetti.

83
00:04:36,450 --> 00:04:37,790
‫Quindi quello

84
00:04:37,790 --> 00:04:40,192
‫che dobbiamo fare è fondamentalmente scorrere

85
00:04:40,192 --> 00:04:42,977
‫questo array e, per ciascuno di essi,

86
00:04:42,977 --> 00:04:45,770
‫sostituire i segnaposto nel modello con i

87
00:04:45,770 --> 00:04:48,500
‫dati effettivi del prodotto corrente, ok?

88
00:04:48,500 --> 00:04:49,333
‫Ha senso?

89
00:04:50,210 --> 00:04:53,533
‫Quindi, mettiamolo nel codice.

90
00:04:54,740 --> 00:04:59,740
‫Quindi oggetto dati, lo esamineremo in loop con una

91
00:05:00,160 --> 00:05:02,930
‫mappa perché vogliamo restituire

92
00:05:02,930 --> 00:05:06,243
‫qualcosa e quel qualcosa, lo salveremo

93
00:05:08,060 --> 00:05:11,637
‫in un nuovo array, quindi chiamiamolo cardHtml,

94
00:05:16,210 --> 00:05:17,140
‫ok?

95
00:05:17,140 --> 00:05:22,140
‫E quindi sono sicuro che hai familiarità con il metodo della mappa, ok?

96
00:05:22,570 --> 00:05:26,147
‫Quindi cosa fa la mappa accetta una funzione

97
00:05:26,147 --> 00:05:30,290
‫di callback e questa funzione di callback ottiene come

98
00:05:30,290 --> 00:05:34,500
‫argomento l'elemento corrente, quindi l'elemento del ciclo corrente e

99
00:05:34,500 --> 00:05:36,423
‫qualunque cosa restituiamo

100
00:05:36,423 --> 00:05:39,880
‫qui verranno quindi salvati in un array, ok?

101
00:05:39,880 --> 00:05:44,240
‫Quindi diciamo che stiamo eseguendo il loop su un array con

102
00:05:44,240 --> 00:05:45,434
‫cinque elementi

103
00:05:45,434 --> 00:05:48,074
‫che è il caso qui, e per

104
00:05:48,074 --> 00:05:51,851
‫ogni elemento, restituiremo qualcosa, e quel qualcosa verrà quindi

105
00:05:51,851 --> 00:05:55,990
‫messo nella stessa posizione ma in questo nuovo array cardsHtml.

106
00:05:55,990 --> 00:05:59,970
‫Quindi, cosa faremo in ciascuna di queste iterazioni?

107
00:05:59,970 --> 00:06:03,048
‫Bene, vogliamo sostituire i segnaposto, giusto?

108
00:06:03,048 --> 00:06:05,200
‫E quindi in realtà andrò avanti

109
00:06:05,200 --> 00:06:06,843
‫e creerò una

110
00:06:06,843 --> 00:06:09,787
‫funzione per questo e che si chiamerà replaceTemplate.

111
00:06:13,881 --> 00:06:14,844
‫Va bene?

112
00:06:14,844 --> 00:06:18,761
‫E replaceTemplate prenderà l'HTML della carta.

113
00:06:19,820 --> 00:06:22,203
‫Quindi, in pratica, la tempCard.

114
00:06:24,890 --> 00:06:28,713
‫E prenderà l'oggetto corrente, quindi element.

115
00:06:29,660 --> 00:06:30,493
‫Va bene?

116
00:06:30,493 --> 00:06:33,703
‫Quindi questo elemento è ciò che contiene i dati, giusto?

117
00:06:34,900 --> 00:06:38,511
‫Quindi, di nuovo, ognuno di questi è ora un

118
00:06:38,511 --> 00:06:42,423
‫oggetto che contiene i dati in ciascuna di queste proprietà.

119
00:06:44,070 --> 00:06:44,903
‫Va bene?

120
00:06:44,903 --> 00:06:49,430
‫E non preoccuparti, se non ha senso al 100%

121
00:06:49,430 --> 00:06:54,130
‫ora, lo sarà una volta creata questa funzione replaceTemplate, ok?

122
00:06:54,130 --> 00:06:56,993
‫Quindi ora facciamolo anche qui.

123
00:06:59,610 --> 00:07:03,100
‫Quindi replaceTemplate è una funzione che accetta

124
00:07:03,100 --> 00:07:07,420
‫un modello, lo chiameremo semplicemente temp qui e

125
00:07:07,420 --> 00:07:09,673
‫ovviamente un prodotto.

126
00:07:12,690 --> 00:07:13,523
‫Bene.

127
00:07:15,780 --> 00:07:18,520
‫Quindi creiamo una variabile

128
00:07:19,500 --> 00:07:21,350
‫chiamata output

129
00:07:22,510 --> 00:07:27,510
‫e quella sarà template. sostituire nel nostro segnaposto.

130
00:07:29,620 --> 00:07:32,810
‫E metteremo qui tutti i

131
00:07:32,810 --> 00:07:36,343
‫segnaposto che abbiamo, iniziando con PRODUCTNAME, ok?

132
00:07:39,130 --> 00:07:43,963
‫E così quello sarà sostituito con il prodotto. NOME DEL PRODOTTO.

133
00:07:45,230 --> 00:07:48,300
‫Quindi product, che è questo argomento che abbiamo passato

134
00:07:48,300 --> 00:07:50,997
‫alla funzione, . PRODUCTNAME perché, beh,

135
00:07:52,300 --> 00:07:54,890
‫questo è il nome del campo in

136
00:07:54,890 --> 00:07:57,350
‫cui si trova il nome del prodotto.

137
00:07:57,350 --> 00:07:58,250
‫Bene?

138
00:07:58,250 --> 00:08:02,160
‫Quindi, vai avanti e copia quello, e va bene.

139
00:08:02,160 --> 00:08:05,014
‫Ora un piccolo trucco che

140
00:08:05,014 --> 00:08:08,150
‫dobbiamo usare qui è non usare

141
00:08:08,150 --> 00:08:11,730
‫effettivamente le virgolette, ma usare invece un'espressione regolare.

142
00:08:11,730 --> 00:08:13,380
‫E questo perché

143
00:08:13,380 --> 00:08:16,517
‫potrebbero esserci più istanze di questo segnaposto

144
00:08:16,517 --> 00:08:21,517
‫e quindi il trucco è racchiuderlo in un'espressione regolare e utilizzare il

145
00:08:22,660 --> 00:08:24,940
‫flag g su di esso.

146
00:08:24,940 --> 00:08:27,010
‫Il che significa globale

147
00:08:27,010 --> 00:08:31,920
‫e quindi questo farà sì che tutti questi segnaposto vengano sostituiti e

148
00:08:31,920 --> 00:08:34,530
‫non solo il primo che si verifica.

149
00:08:34,530 --> 00:08:36,910
‫Quindi questo sostituisce il nome del

150
00:08:36,910 --> 00:08:39,663
‫prodotto, ora andiamo avanti e sostituiamo tutto l'altro.

151
00:08:41,050 --> 00:08:42,473
‫Quindi

152
00:08:44,250 --> 00:08:48,140
‫uscita = uscita. sostituire, e ora

153
00:08:48,140 --> 00:08:49,900
‫andremo avanti

154
00:08:49,900 --> 00:08:54,900
‫e copieremo questo per semplificarmi un po' la vita.

155
00:08:56,360 --> 00:08:59,990
‫Quindi immagine, e si chiama immagine e

156
00:09:01,538 --> 00:09:04,863
‫non in maiuscolo, quindi proprio così.

157
00:09:06,000 --> 00:09:07,020
‫Va bene?

158
00:09:07,020 --> 00:09:09,070
‫Ora quassù, ho creato

159
00:09:09,070 --> 00:09:13,520
‫questa variabile perché volevo sostituire questo nome di prodotto in temp.

160
00:09:13,520 --> 00:09:16,785
‫Quindi nell'argomento, e non è una buona

161
00:09:16,785 --> 00:09:19,760
‫pratica manipolare direttamente gli argomenti che

162
00:09:19,760 --> 00:09:21,760
‫passiamo a una funzione.

163
00:09:21,760 --> 00:09:24,180
‫E così ho creato una

164
00:09:24,180 --> 00:09:25,750
‫nuova variabile e

165
00:09:25,750 --> 00:09:29,100
‫d'ora in poi manipolerò quella prima, ok?

166
00:09:29,100 --> 00:09:31,820
‫Ed ecco perché non è un const, ma un let.

167
00:09:31,820 --> 00:09:35,424
‫Quindi un let, possiamo mutare dopo che è stato creato, ok?

168
00:09:35,424 --> 00:09:37,874
‫Ora lasciami andare avanti, copiane un paio.

169
00:09:40,720 --> 00:09:44,930
‫Quindi prezzo, e anche qui si chiama prezzo, quindi

170
00:09:44,930 --> 00:09:46,653
‫abbiamo da,

171
00:09:50,790 --> 00:09:52,613
‫quindi abbiamo sostanze nutritive.

172
00:09:58,500 --> 00:10:00,290
‫Certo che potrei copiare tutto questo,

173
00:10:00,290 --> 00:10:02,853
‫ma non ho intenzione di saltare avanti e indietro qui.

174
00:10:06,930 --> 00:10:08,033
‫Quindi quantità, descrizione

175
00:10:13,674 --> 00:10:14,703
‫e

176
00:10:17,200 --> 00:10:19,990
‫probabilmente farò qualche errore qui scrivendo tutto

177
00:10:19,990 --> 00:10:22,370
‫questo manualmente ma in un

178
00:10:23,410 --> 00:10:26,920
‫piccolo prodotto, non è affatto un grosso problema.

179
00:10:26,920 --> 00:10:29,470
‫Quindi in realtà questo non ci serve,

180
00:10:29,470 --> 00:10:30,950
‫o in realtà

181
00:10:30,950 --> 00:10:33,120
‫ne abbiamo bisogno perché per l'organico,

182
00:10:33,120 --> 00:10:34,830
‫quindi l'organico che manca,

183
00:10:34,830 --> 00:10:37,870
‫ma ricorda che l'organico era un po' speciale.

184
00:10:37,870 --> 00:10:41,743
‫Quindi in questo caso, se il prodotto non è biologico, allora

185
00:10:42,900 --> 00:10:44,890
‫è prodotto. organico, se è

186
00:10:44,890 --> 00:10:45,883
‫falso,

187
00:10:47,450 --> 00:10:50,510
‫quindi ricorda, questo è in realtà un grassetto.

188
00:10:50,510 --> 00:10:53,130
‫Quindi, per esempio, abbiamo organico vero qui,

189
00:10:53,130 --> 00:10:55,180
‫ma abbiamo falso qui.

190
00:10:55,180 --> 00:10:56,013
‫Va bene?

191
00:10:56,013 --> 00:10:59,470
‫E quindi se è falso, beh in quel caso, allora

192
00:10:59,470 --> 00:11:03,273
‫vogliamo sostituire il NOT. BIOLOGICO.

193
00:11:08,340 --> 00:11:13,340
‫Quindi il NON. Segnaposto BIOLOGICO con semplicemente non-organico.

194
00:11:17,630 --> 00:11:20,160
‫Quindi non organico perché questo è il nome della

195
00:11:20,160 --> 00:11:22,313
‫classe che ti ho mostrato prima.

196
00:11:24,070 --> 00:11:25,730
‫Quindi,

197
00:11:25,730 --> 00:11:28,153
‫è questo.

198
00:11:29,500 --> 00:11:30,520
‫Va bene?

199
00:11:30,520 --> 00:11:35,100
‫Quindi verrà sostituito qui, ok?

200
00:11:35,100 --> 00:11:37,350
‫E così di nuovo, nel caso

201
00:11:37,350 --> 00:11:39,797
‫in cui non sia organico, beh, allora

202
00:11:39,797 --> 00:11:44,043
‫il nome della classe NOT_ORGANIC sarà qui e l'intero batch non verrà spostato.

203
00:11:46,010 --> 00:11:47,623
‫Va bene, ha senso?

204
00:11:48,490 --> 00:11:49,760
‫Quindi, vediamo

205
00:11:49,760 --> 00:11:52,410
‫se w-- ah, scusa, il codice

206
00:11:52,410 --> 00:11:53,410
‫effettivo

207
00:11:53,410 --> 00:11:55,143
‫è sotto di esso.

208
00:11:56,240 --> 00:11:59,890
‫Quindi proviamo a dargli più senso.

209
00:11:59,890 --> 00:12:03,910
‫Quindi, di nuovo, eseguiamo il loop su questo oggetto

210
00:12:03,910 --> 00:12:06,840
‫dati già qui che contiene tutti

211
00:12:06,840 --> 00:12:10,095
‫i prodotti e in ogni iterazione, sostituiremo

212
00:12:10,095 --> 00:12:13,890
‫i segnaposto nella scheda modello con il prodotto corrente

213
00:12:13,890 --> 00:12:16,236
‫che è elemento, giusto?

214
00:12:16,236 --> 00:12:20,580
‫E questa funzione freccia la restituirà implicitamente qui.

215
00:12:20,580 --> 00:12:24,150
‫Quindi è come tornare qui, ok?

216
00:12:24,150 --> 00:12:26,130
‫Ma non è realmente

217
00:12:26,130 --> 00:12:29,341
‫necessario perché in una funzione freccia, se non hai

218
00:12:29,341 --> 00:12:32,934
‫le parentesi graffe, questo valore qui viene automaticamente restituito.

219
00:12:32,934 --> 00:12:35,782
‫Ok, nel caso non lo sapessi,

220
00:12:35,782 --> 00:12:40,782
‫mi sono appena ricordato che ci siamo dimenticati di restituire

221
00:12:41,210 --> 00:12:43,383
‫l'output da qui.

222
00:12:45,360 --> 00:12:46,193
‫Va bene?

223
00:12:46,193 --> 00:12:49,870
‫Quindi, ovviamente, inseriamo il modello e il prodotto,

224
00:12:49,870 --> 00:12:53,533
‫ma ovviamente dobbiamo produrre l'HTML finale.

225
00:12:54,700 --> 00:12:55,533
‫Destra?

226
00:12:55,533 --> 00:12:58,640
‫E quindi questo viene collegato qui, e

227
00:12:58,640 --> 00:13:01,420
‫quindi alla fine, tutto questo qui

228
00:13:01,420 --> 00:13:05,850
‫sostituirà un array, con i cinque HTML finali, ciascuno per

229
00:13:05,850 --> 00:13:08,090
‫una delle cinque schede.

230
00:13:08,090 --> 00:13:12,580
‫Quindi, ciascuno per uno dei cinque prodotti, va bene?

231
00:13:12,580 --> 00:13:16,380
‫Ora andiamo avanti e registriamo questo

232
00:13:16,380 --> 00:13:21,010
‫nella console prima di inserirlo nella pagina Web panoramica.

233
00:13:21,010 --> 00:13:25,433
‫Quindi cardHtml solo per assicurarsi che tutto funzioni qui.

234
00:13:28,090 --> 00:13:28,923
‫Va bene?

235
00:13:30,190 --> 00:13:32,853
‫Quindi dobbiamo ricaricare il server, non dimenticarlo.

236
00:13:35,810 --> 00:13:37,370
‫Funziona tutto allo stesso

237
00:13:37,370 --> 00:13:39,940
‫modo, ma ora diamo un'occhiata alla console.

238
00:13:39,940 --> 00:13:43,710
‫E sto iniziando a vedere cose carine qui.

239
00:13:43,710 --> 00:13:45,500
‫Quindi abbiamo un

240
00:13:45,500 --> 00:13:48,350
‫array e abbiamo effettivamente sostituito le cose.

241
00:13:48,350 --> 00:13:50,170
‫Quindi qui abbiamo degli avocado.

242
00:13:50,170 --> 00:13:52,720
‫Qui dice FreshAvocados.

243
00:13:52,720 --> 00:13:55,773
‫Ha i quattro avocado per scatola, il

244
00:13:57,020 --> 00:13:59,940
‫prezzo e quindi sì, in realtà

245
00:13:59,940 --> 00:14:02,500
‫sembra tutto molto carino.

246
00:14:02,500 --> 00:14:03,840
‫E infatti è anche un array.

247
00:14:03,840 --> 00:14:05,860
‫Quindi abbiamo questa prima

248
00:14:05,860 --> 00:14:09,140
‫cifra, poi una virgola e quindi qui inizia il

249
00:14:09,140 --> 00:14:12,380
‫prossimo elemento quindi la prossima cifra, va bene?

250
00:14:12,380 --> 00:14:15,920
‫Quindi in questo momento abbiamo un array di tutti questi elementi,

251
00:14:15,920 --> 00:14:18,880
‫ma quello che vogliamo in realtà non è

252
00:14:18,880 --> 00:14:22,273
‫un array ma vogliamo una grande stringa contenente tutto questo HTML.

253
00:14:24,250 --> 00:14:27,020
‫Quindi, in realtà è molto semplice da ottenere.

254
00:14:27,020 --> 00:14:30,910
‫Tutto quello che dobbiamo fare è alla fine di questo array, quindi

255
00:14:30,910 --> 00:14:33,290
‫ricordiamo che tutto questo qui restituisce questo

256
00:14:33,290 --> 00:14:36,283
‫array che vediamo qui sotto, e quindi alla fine

257
00:14:37,550 --> 00:14:39,600
‫tutto ciò che facciamo è

258
00:14:39,600 --> 00:14:42,520
‫unire con una stringa vuota, e quindi questo

259
00:14:42,520 --> 00:14:46,080
‫si unirà a tutti di questi elementi in una stringa.

260
00:14:46,080 --> 00:14:50,310
‫E così ora cardHtml è veramente una stringa.

261
00:14:50,310 --> 00:14:51,143
‫Va bene?

262
00:14:51,143 --> 00:14:54,070
‫E così ora abbiamo le nostre

263
00:14:54,070 --> 00:14:56,790
‫carte pronte e l'ultimo pezzo

264
00:14:56,790 --> 00:15:00,740
‫del puzzle è andare avanti e sostituire quel segnaposto.

265
00:15:00,740 --> 00:15:04,110
‫Quindi questo qui, in realtà copiandolo ora,

266
00:15:04,110 --> 00:15:06,401
‫quindi ora sostituendo questo

267
00:15:06,401 --> 00:15:09,413
‫segnaposto con l'HTML che abbiamo appena creato.

268
00:15:11,050 --> 00:15:12,830
‫Quindi chiamiamolo output qui e

269
00:15:13,760 --> 00:15:15,150
‫tutto ciò che dobbiamo

270
00:15:15,150 --> 00:15:16,343
‫fare è

271
00:15:18,060 --> 00:15:22,423
‫tempOverview con solo una stringa che contiene l'HTML della panoramica, giusto? sostituisci e sostituiscilo con

272
00:15:24,156 --> 00:15:25,553
‫cardHtml.

273
00:15:27,330 --> 00:15:30,253
‫Bene?

274
00:15:32,490 --> 00:15:33,750
‫Questo è tutto.

275
00:15:33,750 --> 00:15:34,583
‫Ora tutto ciò

276
00:15:34,583 --> 00:15:38,620
‫che dobbiamo fare è rispondere effettivamente con l'output e non con quello che avevamo prima.

277
00:15:38,620 --> 00:15:41,933
‫Va bene, d'accordo.

278
00:15:43,380 --> 00:15:44,730
‫Quindi sembrava un po'

279
00:15:44,730 --> 00:15:46,760
‫complesso, ma se ci pensi, spero che

280
00:15:46,760 --> 00:15:48,430
‫abbia perfettamente senso per te.

281
00:15:48,430 --> 00:15:51,563
‫E quindi andiamo avanti e testiamo questo ora e

282
00:15:52,920 --> 00:15:55,200
‫spero di non avere errori

283
00:15:56,040 --> 00:15:58,395
‫e qualcosa è andato storto, va bene.

284
00:15:58,395 --> 00:16:02,290
‫Allora cos'è?

285
00:16:02,290 --> 00:16:03,670
‫Ok, quindi ho solo sbagliato a scrivere sostituisci.

286
00:16:03,670 --> 00:16:07,000
‫Questo è uno degli errori più comuni che ricevo sempre.

287
00:16:07,000 --> 00:16:10,863
‫Come un piccolo errore di ortografia.

288
00:16:12,310 --> 00:16:15,003
‫Ricarica e bam, ci siamo.

289
00:16:16,060 --> 00:16:18,740
‫Quindi ecco le nostre cinque righe.

290
00:16:18,740 --> 00:16:22,670
‫Così bello, bello, bello.

291
00:16:22,670 --> 00:16:24,902
‫Ora non sembra proprio

292
00:16:24,902 --> 00:16:29,902
‫quello originale perché quello che manca è come questi, questo organico qui.

293
00:16:30,050 --> 00:16:35,050
‫Va bene?

294
00:16:36,190 --> 00:16:37,023
‫Quindi vediamo cosa c'è che non va.

295
00:16:37,023 --> 00:16:40,070
‫Inoltre, per qualche motivo, qui non

296
00:16:40,070 --> 00:16:44,570
‫vedo la quantità ma solo se non è biologico.

297
00:16:44,570 --> 00:16:48,300
‫Beh, è strano, quindi proviamo a indagare su cosa sta

298
00:16:48,300 --> 00:16:49,371
‫succedendo qui.

299
00:16:49,371 --> 00:16:53,420
‫Quindi l'errore è probabilmente da qualche parte qui

300
00:16:53,420 --> 00:16:55,620
‫in questa funzione replaceTemplate.

301
00:16:55,620 --> 00:16:58,820
‫Ma in realtà, tutto sembra corretto qui.

302
00:16:58,820 --> 00:17:02,210
‫Quindi anche qui su questo sostituto non organico.

303
00:17:02,210 --> 00:17:06,293
‫Quindi diamo un'occhiata alla nostra scheda modello e,

304
00:17:07,220 --> 00:17:09,890
‫quindi, vedo qui che quando

305
00:17:11,410 --> 00:17:12,243
‫c'è

306
00:17:13,890 --> 00:17:17,830
‫questo NOT_ORGANIC, beh, in realtà l'intera scatola qui,

307
00:17:17,830 --> 00:17:20,550
‫quindi anche questo H6 non sarà

308
00:17:20,550 --> 00:17:21,690
‫più visibile.

309
00:17:25,330 --> 00:17:26,783
‫Quindi qualcosa sembra

310
00:17:27,910 --> 00:17:30,980
‫sbagliato qui, diamo un'occhiata a quello originale

311
00:17:30,980 --> 00:17:33,080
‫solo per ispezionare l'HTML qui.

312
00:17:34,870 --> 00:17:37,183
‫Quindi il dettaglio della carta è

313
00:17:39,730 --> 00:17:43,330
‫questo e quindi noi, sì, in realtà abbiamo tre

314
00:17:43,330 --> 00:17:45,150
‫dettagli della carta

315
00:17:45,150 --> 00:17:48,630
‫qui mentre nel modello, ne abbiamo solo uno, ok?

316
00:17:48,630 --> 00:17:51,773
‫Quindi andiamo avanti e copiamo questo.

317
00:17:52,670 --> 00:17:56,270
‫Quindi nei dettagli puoi effettivamente copiare un elemento

318
00:17:56,270 --> 00:17:59,160
‫e poi, proprio così, copierà l'intero

319
00:18:00,410 --> 00:18:01,260
‫elemento.

320
00:18:03,300 --> 00:18:06,283
‫Quindi questo è come dovrebbe essere.

321
00:18:07,400 --> 00:18:11,053
‫E quindi qui dovrebbe dire biologico e non quantità

322
00:18:13,220 --> 00:18:14,840
‫per scatola, ok?

323
00:18:14,840 --> 00:18:18,193
‫Quello è probabilmente il prossimo.

324
00:18:18,193 --> 00:18:20,263
‫Quindi, risolviamolo

325
00:18:27,780 --> 00:18:29,193
‫rapidamente.

326
00:18:30,730 --> 00:18:32,290
‫E qui,

327
00:18:32,290 --> 00:18:35,760
‫ovviamente, non lo vogliamo, e quindi

328
00:18:35,760 --> 00:18:38,920
‫sì, sembra migliore, chiudilo, riavvia il

329
00:18:38,920 --> 00:18:41,763
‫server e controlliamolo di nuovo.

330
00:18:43,850 --> 00:18:48,143
‫E ora, bam, ci siamo.

331
00:18:49,550 --> 00:18:51,660
‫Quindi ora funziona e in effetti funziona esattamente allo stesso modo.

332
00:18:51,660 --> 00:18:56,660
‫Bellissimo.

333
00:18:57,150 --> 00:18:58,370
‫Quindi è davvero bello.

334
00:18:58,370 --> 00:19:01,070
‫Andiamo avanti ed eliminiamo,

335
00:19:01,070 --> 00:19:06,070
‫ad esempio, gli avocado solo per vedere cosa succede.

336
00:19:06,990 --> 00:19:08,680
‫Farò solo il

337
00:19:08,680 --> 00:19:13,680
‫controllo, X per tagliarlo, ricaricarlo qui, e non cambierà

338
00:19:13,900 --> 00:19:17,410
‫e questo ovviamente perché ricorda che

339
00:19:17,410 --> 00:19:20,040
‫questo, questi dati vengono effettivamente

340
00:19:20,890 --> 00:19:21,723
‫letti

341
00:19:22,770 --> 00:19:24,420
‫solo all'inizio

342
00:19:24,420 --> 00:19:26,990
‫quando avviamo l'app, ok?

343
00:19:26,990 --> 00:19:30,490
‫Quindi, affinché questo abbia effetto, abbiamo effettivamente bisogno

344
00:19:30,490 --> 00:19:32,250
‫di riavviare l'applicazione.

345
00:19:32,250 --> 00:19:36,635
‫Ok, quindi niente di grave.

346
00:19:36,635 --> 00:19:38,853
‫E ora non c'è più, ok?

347
00:19:40,760 --> 00:19:43,200
‫Perché non è più nel

348
00:19:43,200 --> 00:19:45,900
‫file JSON che viene letto nel

349
00:19:45,900 --> 00:19:47,920
‫momento in cui avviamo

350
00:19:47,920 --> 00:19:49,630
‫l'applicazione Va bene?

351
00:19:52,050 --> 00:19:52,883
‫Rimettiamolo

352
00:19:52,883 --> 00:19:57,563
‫qui, salviamolo, riavviamo, apriamo questo tizio, ricarichiamo ed eccolo di nuovo.

353
00:19:58,450 --> 00:20:02,630
‫Quindi ora funziona davvero in modo dinamico leggendo tutti

354
00:20:02,630 --> 00:20:05,580
‫questi dati direttamente dal file JSON.

355
00:20:05,580 --> 00:20:09,660
‫Quindi questo funziona, controlliamo i collegamenti anche laggiù

356
00:20:09,660 --> 00:20:12,860
‫nell'angolo in basso a sinistra.

357
00:20:12,860 --> 00:20:15,810
‫Vedi che l'ID cambia da zero, uno a

358
00:20:15,810 --> 00:20:18,600
‫e così via e così via, ma

359
00:20:18,600 --> 00:20:20,750
‫se clicco qui, beh, quando otteniamo

360
00:20:20,750 --> 00:20:22,320
‫Pagina non trovata.

361
00:20:22,320 --> 00:20:25,310
‫E questo perché il nostro percorso non è ancora pronto per questo.

362
00:20:25,310 --> 00:20:29,170
‫Va bene?

363
00:20:29,170 --> 00:20:30,010
‫E quindi

364
00:20:30,010 --> 00:20:33,320
‫facciamolo nel prossimo video e implementiamo la pagina dei dettagli

365
00:20:33,320 --> 00:20:35,780
‫del prodotto per ciascuno di questi prodotti.

366
00:20:35,780 --> 00:20:37,200
‫Quindi, non aspettare e ora andiamo avanti.