1 00:00:00,120 --> 00:00:06,720 In the previous lesson, we saw how we can connect to adjacent file and then return that JSON as a JavaScript 2 00:00:06,720 --> 00:00:10,570 object and use that object within our JavaScript code. 3 00:00:10,860 --> 00:00:17,190 So there's also an option and a possibility that in some cases, the data that you return back from 4 00:00:17,190 --> 00:00:20,100 your fetch request comes back as a string. 5 00:00:20,460 --> 00:00:26,730 And within the console, we can see a clear difference between the JSON data and the string being output 6 00:00:26,730 --> 00:00:27,710 into the console. 7 00:00:27,780 --> 00:00:30,660 And this just outputs it as a regular string. 8 00:00:30,990 --> 00:00:35,450 So in this case, you can't return back the value of data. 9 00:00:35,460 --> 00:00:38,910 So if we output data, it just returns it back as a string. 10 00:00:39,060 --> 00:00:40,850 So we can't say data lost. 11 00:00:41,190 --> 00:00:46,050 That's not going to return back any property values because there's nothing associated with data loss 12 00:00:46,050 --> 00:00:47,660 which is going to return undefined. 13 00:00:47,940 --> 00:00:55,890 Whereas with Jason Method, where it turns into a JavaScript object, we can use data and return back 14 00:00:55,890 --> 00:01:03,240 the various property values, then return back to the values that are associated with the properties. 15 00:01:03,750 --> 00:01:12,750 So in some cases, it is important to be able to turn it back and take a string and pass it into JSON. 16 00:01:12,900 --> 00:01:16,710 So essentially what that's what the JSON method in fetch is doing. 17 00:01:16,860 --> 00:01:22,650 That's parsing the string value and returning it back as JavaScript object. 18 00:01:22,980 --> 00:01:28,710 There's a definition at the Mozilla Developer Network where JSON pass method passes the JSON string 19 00:01:28,920 --> 00:01:33,540 constructing a JavaScript value and an object described by that string. 20 00:01:33,960 --> 00:01:35,370 So they've got an example here. 21 00:01:35,550 --> 00:01:40,980 And let's also take that data that's being returned back from JSON. 22 00:01:41,160 --> 00:01:44,280 And remember, in this case, this is going to be a string. 23 00:01:44,430 --> 00:01:46,820 We want to output it back as an object. 24 00:01:47,010 --> 00:01:52,680 So this is where we can use the JSON pass method. 25 00:01:52,890 --> 00:02:03,510 And within the pass method, we can just as done over here, we can pass the results of JSON and assign 26 00:02:03,510 --> 00:02:05,810 it to the data value. 27 00:02:06,600 --> 00:02:08,660 So return back that data. 28 00:02:08,970 --> 00:02:13,000 And now we're back to a usable object in JavaScript. 29 00:02:13,380 --> 00:02:17,310 There's also cases where you might want to turn it into a string. 30 00:02:17,610 --> 00:02:23,370 And if you're restoring it to local storage and a few other resources where they've only got the one 31 00:02:23,370 --> 00:02:31,050 site slot and they're expecting a string value, if you want to take the string value or you JSON value 32 00:02:31,050 --> 00:02:35,730 and turn it into a string, you can do the opposite of the parts we're using. 33 00:02:35,730 --> 00:02:40,910 JSON String Afie is going to turn it back into a string value. 34 00:02:41,190 --> 00:02:49,290 So taking the data, turning it into a string and if we do a console log of the string, we see that 35 00:02:49,290 --> 00:02:51,950 now it's once again within a string format. 36 00:02:52,260 --> 00:02:54,380 So that means that we can't separate it out. 37 00:02:54,570 --> 00:02:56,940 We still have the data value here. 38 00:02:57,420 --> 00:03:00,360 We haven't reassigned data to a new value. 39 00:03:00,510 --> 00:03:02,280 It's just been reassigned. 40 00:03:02,760 --> 00:03:07,110 It's been a sign that the JSON string of high value has been assigned to data. 41 00:03:08,520 --> 00:03:16,020 And I'll give you a quick example of how we can use this JSON object and store it into local storage 42 00:03:16,830 --> 00:03:20,720 and we're going to store it as a string value into the local storage. 43 00:03:20,750 --> 00:03:23,250 So right now we're putting it into the console. 44 00:03:23,520 --> 00:03:25,680 Let's commentate both of these. 45 00:03:25,950 --> 00:03:31,920 We're returning it back as text value and then we're parsing it into JSON to usable object. 46 00:03:32,130 --> 00:03:35,010 So let's keep that and then we're turning it back into a string. 47 00:03:35,010 --> 00:03:43,980 So once we do retrieve the data back, we can use the local storage and set an item into the local storage. 48 00:03:44,220 --> 00:03:52,560 And what local storage does is this allows us to store property value into the storage of the document 49 00:03:52,770 --> 00:03:53,280 origin. 50 00:03:53,300 --> 00:03:58,500 So basically it's similar to the session storage, except that the data stored in local storage has 51 00:03:58,500 --> 00:04:03,240 no expiration time and also the data stored in local storage. 52 00:04:03,420 --> 00:04:05,550 So this is relevant to the browser. 53 00:04:05,560 --> 00:04:11,620 So set item and it expects to properties and these are going to be string values that it's expecting. 54 00:04:11,940 --> 00:04:15,110 So one of them is going to be the property name. 55 00:04:15,420 --> 00:04:18,870 So this is going to be whatever the property name is. 56 00:04:19,080 --> 00:04:24,480 And then on the other side, it's expecting a value of the value that's being stored. 57 00:04:24,480 --> 00:04:31,050 And in this case, we've got the string of version of the JavaScript JSON object. 58 00:04:31,320 --> 00:04:37,980 So now we've set the item into local storage and we can also go to retrieve the item from the local 59 00:04:37,980 --> 00:04:38,420 storage. 60 00:04:38,730 --> 00:04:45,510 So when we load the page, we don't necessarily need to make another request to Jason if we already 61 00:04:45,510 --> 00:04:46,620 have it existing. 62 00:04:46,830 --> 00:04:53,070 So let's set up a condition to check to see if there is a value for this. 63 00:04:53,580 --> 00:04:58,530 And if there is within the local storage, then we can return back and. 64 00:04:58,680 --> 00:05:03,700 Assign the value otherwise we can make the request to the function to fetch the data. 65 00:05:04,200 --> 00:05:10,680 And either way, we're going to output the data into the console in the and so going into the function. 66 00:05:15,230 --> 00:05:17,750 And get the local data. 67 00:05:19,270 --> 00:05:27,940 And using the local storage method and to get item and the item that we're getting is going to be referenced 68 00:05:27,940 --> 00:05:28,810 under temp. 69 00:05:30,410 --> 00:05:32,420 So it's going to return that value back. 70 00:05:35,060 --> 00:05:44,750 And let's log into the local storage, the data value, so that's going to put it as a string and because 71 00:05:44,750 --> 00:05:49,880 it is expecting a string parameter, we want to make it back to a usable object. 72 00:05:50,090 --> 00:05:56,060 Then this is where we can use the JSON pass and pass that data into a usable object. 73 00:05:56,960 --> 00:06:00,950 So let me do a quick update on this and the first time that we run it. 74 00:06:02,690 --> 00:06:10,820 It's going to return back now so we can have a condition to check to see if local data. 75 00:06:12,040 --> 00:06:18,610 Doesn't exist, and if it doesn't exist, then that's what we're going to make the request to my Jason. 76 00:06:25,620 --> 00:06:30,900 And if it does exist, then we're going to output the contents of the local data. 77 00:06:33,580 --> 00:06:42,580 And I'll just move that console message into that function so it does exist, so we're just out putting 78 00:06:42,580 --> 00:06:48,730 it into the local data so it doesn't matter how many times we run it, it's always going to exist if 79 00:06:48,730 --> 00:06:56,620 we go for temp to and update us to attempt to the first time we refresh it, it's not going to exist. 80 00:06:57,900 --> 00:07:02,630 And then the second time it is going to exist, so it's just going to output the console message, so 81 00:07:02,680 --> 00:07:06,020 right here, it had to make the request to return that data. 82 00:07:07,590 --> 00:07:14,340 And now that we've got it within a string value, we want to turn it back into a usable data object. 83 00:07:14,610 --> 00:07:17,630 And this is where we can set a value for data. 84 00:07:18,090 --> 00:07:22,410 And this is just the global data value and using JSON. 85 00:07:24,910 --> 00:07:29,590 Pass, let's pass the value of the local data 86 00:07:32,260 --> 00:07:35,380 and we'll console log data. 87 00:07:37,820 --> 00:07:44,570 So now it's coming from the local storage, this value here is coming from the local storage and it 88 00:07:44,570 --> 00:07:46,530 initially came from the JSON file. 89 00:07:47,090 --> 00:07:52,970 So if we make an update to the JSON file, we're still getting it from the local storage. 90 00:07:53,270 --> 00:08:01,340 If we update the value for the local storage, it's going to make the request to the local storage with 91 00:08:01,340 --> 00:08:03,860 the property of temp three. 92 00:08:04,220 --> 00:08:08,390 And it's going to first time it's going to save it into the local storage. 93 00:08:08,660 --> 00:08:11,780 And we should also have a message here within the console. 94 00:08:15,770 --> 00:08:16,760 To local. 95 00:08:19,660 --> 00:08:24,910 So just have a console message there that's safe to the local storage and then the second time it's 96 00:08:24,910 --> 00:08:31,090 accessing that data from the local storage that was initially placed there with the Thach request, 97 00:08:31,270 --> 00:08:32,560 and it's outputting that. 98 00:08:32,710 --> 00:08:39,850 So it's taking it back as a string value and then it's parsing it and turning it into a usable JavaScript 99 00:08:39,850 --> 00:08:40,300 object. 100 00:08:43,630 --> 00:08:50,410 And that's one of the uses that you can use that Jason Parsons, Jason Stringer by in order to turn 101 00:08:50,410 --> 00:08:54,190 it into a string and then also turn it into a usable JavaScript object. 102 00:08:57,580 --> 00:09:04,540 The challenge for this lesson is to get the facts content as text, to just update the method to text 103 00:09:04,540 --> 00:09:11,650 instead of JSON, use JSON pass method and JavaScript to turn the string object into a usable JavaScript 104 00:09:11,650 --> 00:09:17,320 object and then use the local storage to save the string version of the. 105 00:09:19,460 --> 00:09:26,750 JavaScript object, and then lastly, use the parse and the string of Afie in order to store and retrieve 106 00:09:26,750 --> 00:09:28,220 it from local storage.