1
00:00:00,320 --> 00:00:06,230
In this video we are going to learn how can we insert data in server using fetch API?

2
00:00:06,680 --> 00:00:13,360
For that we need to provide server side file path, maybe php file, python file or dotnet file.

3
00:00:13,370 --> 00:00:15,560
With that we pass some parameter.

4
00:00:15,560 --> 00:00:18,440
So I use comma and I use curly braces.

5
00:00:18,620 --> 00:00:23,990
And inside the curly braces we use some properties and they have some different values.

6
00:00:24,140 --> 00:00:26,090
Our first property is method.

7
00:00:26,210 --> 00:00:31,190
As I told you earlier, we have different method to retrieve data and send data.

8
00:00:31,190 --> 00:00:35,000
And if you want to insert data then we need to use post method.

9
00:00:35,000 --> 00:00:37,580
But for Json we have some more method.

10
00:00:37,670 --> 00:00:42,500
When we need to insert data to our server, we need to use post method.

11
00:00:42,500 --> 00:00:46,460
But if you want to update server data then you need to use put.

12
00:00:46,970 --> 00:00:50,960
And if I want to delete server data then we need to use delete method.

13
00:00:50,960 --> 00:00:52,610
And you just want to read data.

14
00:00:52,610 --> 00:00:54,710
Then you need to use get method.

15
00:00:55,010 --> 00:00:57,970
And then come our second property which is body.

16
00:00:57,980 --> 00:01:03,890
Inside the body we pass those data which we have to insert in our server.

17
00:01:03,890 --> 00:01:09,350
And it can be different maybe from data Json data or text data.

18
00:01:09,350 --> 00:01:11,690
And then we need to pass our header.

19
00:01:11,690 --> 00:01:13,490
We need to declare the format.

20
00:01:13,520 --> 00:01:17,480
However we want to send data to the server through the body.

21
00:01:18,330 --> 00:01:20,550
I just want to say content type.

22
00:01:20,550 --> 00:01:24,030
For this we need to type a keyword content type.

23
00:01:24,030 --> 00:01:29,580
And then we need to type application slash data format in our case Json.

24
00:01:29,580 --> 00:01:34,440
It's mean whatever data we send from our body, it's a Json formatted data.

25
00:01:34,440 --> 00:01:37,230
Suppose we don't want to send Json data.

26
00:01:37,260 --> 00:01:39,780
I want to send is HTML from data.

27
00:01:39,780 --> 00:01:49,500
In that case we need to use different content type application slash x hyphen W-w-w hyphen from hyphen

28
00:01:49,500 --> 00:01:50,940
URL encoded.

29
00:01:51,210 --> 00:01:55,680
If you want to send from data directly, then you need to use this method.

30
00:01:55,920 --> 00:01:57,570
So let me show you the practical.

31
00:01:58,200 --> 00:02:02,490
And now I'm going to insert data to our server using fetch API.

32
00:02:03,210 --> 00:02:06,180
And you know we don't have any real database.

33
00:02:06,630 --> 00:02:09,150
So I'm going to use fake Json data.

34
00:02:09,900 --> 00:02:13,410
So I'm going to use our old website named Json placeholder.

35
00:02:14,170 --> 00:02:19,340
And if I scroll down a little bit, you can see you can see a link named guide.

36
00:02:19,360 --> 00:02:24,970
Inside this link you can get the code that you can use to send data to server using fetch API.

37
00:02:25,000 --> 00:02:28,360
If you want to read data then you need to use this code.

38
00:02:29,090 --> 00:02:33,560
And if I scroll down a little bit, you can see an option creating a resource.

39
00:02:34,010 --> 00:02:39,320
So using this code we can insert data in our live server through fetch API.

40
00:02:39,470 --> 00:02:43,700
And you can see the header content type method post.

41
00:02:43,700 --> 00:02:47,210
And you can see another function named Json.stringify.

42
00:02:47,720 --> 00:02:48,890
What is the meaning of it?

43
00:02:48,920 --> 00:02:56,420
However data we get from our user, it's a JavaScript object and we cannot save JavaScript object directly

44
00:02:56,420 --> 00:02:57,360
to Json file.

45
00:02:57,380 --> 00:03:00,590
So we use the function named Json.stringify.

46
00:03:00,770 --> 00:03:07,520
It converts the JavaScript object into a Json data, and we already know if we try to send Json data,

47
00:03:07,940 --> 00:03:11,630
then we need to declare our content type application Json.

48
00:03:11,750 --> 00:03:13,790
So I'm going to use this whole code.

49
00:03:13,940 --> 00:03:18,950
So I select and copy it and insert the script tag I'm going to override the code.

50
00:03:19,460 --> 00:03:23,510
So using this file I'm going to insert new data to our server.

51
00:03:23,510 --> 00:03:26,770
And you can see our server path in our URL section.

52
00:03:26,780 --> 00:03:33,410
And if I save the file and back to the page and you can see in my console it returned the data what

53
00:03:33,410 --> 00:03:35,180
we insert in our server.

54
00:03:35,270 --> 00:03:40,850
You can see ID 101, title F00 and user ID one.

55
00:03:41,150 --> 00:03:43,270
This is the response from our server.

56
00:03:43,280 --> 00:03:46,670
It's a dummy data so it's not going to save permanently.

57
00:03:46,670 --> 00:03:53,540
But this is the exact method we should follow when we try to insert data in server using fetch API.

58
00:03:53,750 --> 00:03:55,010
It's a fake data.

59
00:03:55,040 --> 00:04:00,980
If I change the title Hello World and save the code, you can see an error in our console.

60
00:04:01,520 --> 00:04:03,050
It is not 404.

61
00:04:03,140 --> 00:04:08,660
This website provides a demo file so we cannot add different data to their server.

62
00:04:08,690 --> 00:04:11,990
We can use this website link for practice purpose.

63
00:04:12,880 --> 00:04:19,180
But if we use our own PHP code or any other server side language, then we can save the data in that

64
00:04:19,180 --> 00:04:19,870
server.

65
00:04:19,900 --> 00:04:23,470
Not only that, you can create the object outside the body tag.

66
00:04:23,920 --> 00:04:24,880
Let me show you.

67
00:04:25,120 --> 00:04:27,640
So I'm going to copy the object content.

68
00:04:28,150 --> 00:04:30,880
And outside the fetch API I'm going to create a variable.

69
00:04:31,180 --> 00:04:34,790
VAR obj obj equal to a.

70
00:04:34,870 --> 00:04:40,750
Create a JavaScript object using same key and value and inside the body section I'm going to convert

71
00:04:40,750 --> 00:04:43,380
this JavaScript object into a Json data.

72
00:04:43,390 --> 00:04:47,950
So json dot stringify inside the round braces obj.

73
00:04:48,610 --> 00:04:52,460
And if I save this file you can see the response in our console.

74
00:04:52,480 --> 00:04:57,040
So I hope now it's clear for you what is fetch method and how we can use.

75
00:04:57,040 --> 00:05:02,020
And if I back to the Json placeholder guide you can see updating resource method.

76
00:05:02,710 --> 00:05:07,630
Just you need to change your method name put and you need to follow the similar step.

77
00:05:08,020 --> 00:05:08,890
That's it.

78
00:05:09,190 --> 00:05:13,510
And for delete data just you need to use delete method.

79
00:05:14,230 --> 00:05:18,530
And in your URL you need to provide the exact index number.

80
00:05:18,550 --> 00:05:21,500
You can see post slash one.

81
00:05:21,520 --> 00:05:23,320
I hope you enjoyed this video.

82
00:05:23,560 --> 00:05:25,090
Thanks for watching this video.

83
00:05:25,120 --> 00:05:26,860
See you on the next tutorial!