Vue JS 3 Tutorial for Beginners #9 - Fetching Data

[@theebookkeeper]

for anyone having difficulties running the json-server command: Here is the solution: Run: npx json-server --watch data/db.json Happy coding :)

[@reinoutko]

Thanks that worked, the line in the video gave me an error

[@danielwarzecha2007]

Thank you!

[@razorX_09]

The man's a life saver!

[@programmerhp7736]

thank you

[@chip9417]

legend

[@CV-wo9hj]

Awesome series thank you. With the latest json server "1.0.0-alpha.20", I had to modify db.json otherwise I kept getting a 404 not found. I had to add quotation marks around the ID numbers as follows { "jobs": [ { "id": "1", "title": "Ninja UX Designer", "details": "lorem" }, { "id": "2", "title": "Ninja Web Developer", "details": "lorem" }, { "id": "3", "title": "Ninja Vue Developer", "details": "lorem" } ] }

[@nathanrochas8449]

Thank you I was digging the Internet searching for a fix

[@AlberthAndrade]

Thanks bro, why does it happen? We don't know... hahaha

[@mlokish]

Had the same issue, thanks for solution!

[@who-1880]

thanks!

[@omar2006xxx]

Thanks! Same here.

[@tswtdt555]

Seriously, as everyone has already said, Thank you very much!! Please keep doing this!! You've helped a lot. I'm actually getting pretty good at front end development and feel confident getting into back end.

[@blakebedford-palmer6676]

Love it! Maybe one thing overlooked, is even if you use a invalid job ID ( /jobs/6), JSON server returns 404 but sends an empty object, so when you do v-if="job" it's still true, even though this.job is just an empty object

[@silenthill8312]

I gotta tell you You're a life saver Everytime i get stuck at something i always come here and miraculously almost every problem get solved

[@NetNinja]

Aha, glad I could help :) thanks for watching!

[@qhphan5]

For all those who are too lazy to navigate to the course files: { "jobs": [ { "title": "Ninja UX Designer", "id": 1, "details": "lorem" }, { "title": "Ninja Web Developer", "id": 2, "details": "lorem" }, { "title": "Ninja Vue Developer", "id": 3, "details": "lorem" } ] }

[@softwareEngineerKunwar]

Thank for tutorials, please bring more tutorials in vue 3 like crud api, crud more. There are very few tutorials in vue 3 and you tutorials are best among them. I hope you also use bootstap 4 or 5 for ui.

[@zenmasterfu]

If you wish to show the "results loading ..." pages add "--delay (time in ms)" to the json-server command. I use 500 ms..

[@georgi_verstapen33]

If you face this issue "json-server : The term 'json-server' is not recognized as the name of a cmdlet, function, script file, or operable program" Simpli write: npx json-server --watch src/data/db.json --port 3000. This will solve the above error and will host the json-server on your desired port (in this example on port 3000) Hope this helped you, dear developer :)

[@黃暐倫-q4v]

Thanks, bro!

[@Skaxarrat]

Thanks for this incredible tutorials, Shaun. btw, one way to not getting an error is making the "job" variable an object: data() { return { job: {}, } },

[@dotunn]

thanks so much, that was driving me crazy lol, i was wondering why it wasnt working

[@learnsimple4592]

Thanks Shaun. Best tutorial ever. Just wanted to know whether you are planning on a MEVN stack or a sass tutorial and which UI com potent library do you recommend for vue.

[@NetNinja]

Hey, I may do a full stack Vue project at some point but was thinking of using GraphQL. May also do a SASS refresh at some point too. I really like Vuetify for Vue 2, looking forward to it's new relase for v3 :)

[@learnsimple4592]

@@NetNinja As long as it is Vue fullstack (graphQL or MEVN). Count me in.

[@hassanmiiro1030]

@@learnsimple4592 @The Net Ninja me too.

[@00el04]

@@NetNinja subscribed for more future content :)

[@mateuszfrydrych9822]

A little hint: for chromium-based browsers (Chrome, Edge, I don't know about others) you can limit the network speed for the browser. This is done in the "Network" tab (where you have viewed the queries sent to the server) from the "Unlimited" option to one of the ready settings, eg "Fast 3G network" or "Slow 3G network" or any custom setting. Regards

[@kajganamakedonska1846]

why would you do that?

[@bakatoroi]

@@kajganamakedonska1846 To better see what happens at 11:30. Also testing in general.

[@mauricemakesmovies]

You're a great teacher. Keep up the good work Shaun!

[@NetNinja]

Thanks Maurice, I appreciate that! :)

[@angelosarnaoutis6391]

If you want to test "loading jobs...", you can add a delay to the response of the json server. This can be done by adding to the json-server command the --delay or -d and the the number of milliseconds you want the response to be delayed.

[@franklinsampaio9254]

Or you can just press F12, go to network and change from 'online' to 'slow 3g'. With that you can test this too...

[@deletedaccount-b5o]

You are a brilliant teacher! Thank you very much!

[@dayanavm]

npx json-server --watch data/db.json = This command help me to watch file using json-server in windows.

[@nasserwaleed-y8u]

doesn't work, that appear in my screen ; file:///C:/Users/aa/AppData/Roaming/npm/node_modules/json-server/lib/bin.js:4 import { parseArgs } from 'node:util'; ^^^^^^^^^ SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs' at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21) at async ModuleJob.run (node:internal/modules/esm/module_job:194:5) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:385:24) at async loadESM (node:internal/process/esm_loader:88:5) at async handleMainPromise (node:internal/modules/run_main:61:12)

[@marcmil4064]

Awesome video! One suggestion though: We should hope that the company always has at least one open job, otherwise the length of the array will stay 0 and "Loading" will be shown forever ;)

[@lilmila4533]

is there a tutorial of yours which you use database instead of a json?

[@kaleabwoldemariam4288]

Thank you for the thorough tutorial.❤

[@NetNinja]

Hope it was helpful! thanks for watching :)

[@danielorkan5151]

$ json-server -watch data/db.json (I got command not found: json-server) I'm using MacOS with npm (6.14.4) In order to solve this I had to uninstall json-server using: $ npm uninstall json-server and then install json-server globally using: $ npm install -g json-server

[@bytesoclock]

thank you

[@danielwarzecha2007]

Note: at the 12 minute mark, if your getting a net::ERR_BLOCKED_BY_CLIENT error message....it is likely that it is your browser ad blocker! disable it, or use a different browser, this was the problem for me when using the brave browser, I just clicked the lion head and disabled it and it works fine

[@Akosiyawin]

Hi, from my experience you would fetch data in a created() life cycle hook, it's much better for handling get requests

[@robinbeaudru6892]

Thank you, very useful tutorial series. I'm wondering, why don't you have to filter the results from the fetch with the id props? is JSON Server already configured for that? Cheers!

[@hawarhekmat1174]

thank you, you are teaching in best way ❤️

[@BarbaraBezd]

Thank you very much for your course! it's extremely helpful and easy to understand!

[@NetNinja]

Glad it was helpful! :) thanks for watching

[@gilbertandsausage]

After installing json-server it wouldn't let me use json-server in command line, to fix this I installed it globally adding the -g tag after "install" then installing it locally to the project. I'm not sure if anyone else has experienced this issue but if you are this is how you resolve that.

[@badreddinlabed530]

Thank u so much Ninja ❤ u are the best!

[@Новаинжиниринг]

Such an excellent video! Thank you!

[@NetNinja]

You're very welcome!

[@3d_cube_3d95]

How do I cancel my previous fetch request ? Let's say I was fetching a data on my project then while my page is still fetching I changed to another page route?

[@chenqu773]

I doun't knaow the origin of your accent. Bot it's very charming I reeely like it!

[@NetNinja]

Thank you! 😃 I'm from Manchester, UK!

[@chenqu773]

@@NetNinja Hoooray! Again, many thanks to your great tutorial !

[@derekbressler9154]

vue is the best!

[@hassaniqbal6199]

agree

[@derekbressler9154]

agree

[@sauravjain6135]

Noobs favourite: Angular Pro favourite: React Hackers favourite: Vue

[@BenjaminGSlade]

"fetch data", does that mean fetch data from a database to memory? or to/from/ memory from/to the screen?

[@ankithap7624]

thank you for your awesome content shaun

[@jimos9878]

The same way 'jobs' is not null because it's just an empty array (value), couldn't we set 'job' property to {} instead of null? So it would be an empty object and not null. Or is {} still a null value?

[@tomvanbrabant3053]

Why not pass the job as a prop to JobDetails? For production, would it be better performance because you don't fetch it twice? Thanks.

[@ИгорьИванов-т1ю]

I undestand how make a list of items in json-server, but how to delete any item from my list using fetch request? how to address to exact id?

[@khouloudcherrat1060]

at 15:58 the problem can be fixed quickly if we set job : {}.

[@MatichekYoutube]

Hi, can you create multiple fetch statements there?

[@ghostkillerbr9]

thankss :)

[@chanhkunbin906]

i using axios and call api from MongoDB, however when i get the id from the job page it says detailJobs error 404 has format detailJobs/undefined

[@dikebambangsk4864]

is it fetch automatic can call after install on package.json, not import the node-fetch

[@jamols09]

I just think its better to cover on axios than fetch

[@anthonygoodjobs4544]

Not really, it's much better to use the native Fetch for these type of cases.

[@0jhivag]

Great,but how i do this in composition api,how i get the id?

[@pt_trainer9244]

Use props or vue router and pass the Id with the params parameter

[@tona17yo]

Pero de esta forma haces 2 peticiones, en la primera ya tienes todo, por qué no almacenarlo en vuex y desplegar la data necesaria por medio de su id?

[@lilmila4533]

how can we fetch data from a created database server for vue.js?

[@rommyrisyandi2863]

i got problem in section 5:26 and the problem is this : json-server : The term 'json-server' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 is there anyone can help me?

[@ccindy951357]

謝謝！

[@不滅のキュレル]

Thank you ! by japanese(日本人）

[@g2rocky231]

Hello sir, I want to learn app development. But I don't know which one to prefer "react-native" or "flutter". I know react js very well and also flutter a bit. Can you prefer which one is better.

[@kajganamakedonska1846]

if you know whats there to learn>?

[@ridl27]

ty.

[@SUBZER0GREEN]

9:00

[@antoniofuller2331]

Hmmm

[@shubhang2877]

What is your dog's name?

[@NetNinja]

I don't have one, but if I did I would call it Yoshi :)

[@shubhang2877]

Wait then who's the cutie on your github pfp?

[@ivansanczewski6648]

I bought this tutorial and follow this part and it worked fine for me, until I had to use a json file with Pinia… I can GET mock data from my file and populate an array, but when it comes to POST new data I keep on receiving this error: "POST localhost:3000/borrowedBooks 500 (Internal Server Error)" Any help would be highly appreciated!

[@_isaac_muniz_]

i wasn't able to run json-server so i installed it globally with 'npm install -g json-server' and it worked fine

[@jesserigon]

why use mounted hook and not beforemount or something like that so you dont have to write all the conditionals?

[@alielzahaby3315]

{ "jobs": [ { "title": "Ninja UX Designer", "id": 1, "details": "lorem" }, { "title": "Ninja Web Developer", "id": 2, "details": "lorem" }, { "title": "Ninja Vue Developer", "id": 3, "details": "lorem" } ] } np ;)

[@RohitThakur-sj7en]

I stopped continuing Vue and switched to React a few months ago. But, now I'm back, thanks to you. Love your tutorials :)

[@mohdmahtab8991]

React vs Vue which one best ?

[@RohitThakur-sj7en]

@@mohdmahtab8991 Both of them are great frameworks. But I would suggest going with Vue as it is a lot more beginner friendly.

[@TheCodingOdyssey]

I've been working with React for over a year. I am thinking to start learning Vue as well. How different is it?

[@mohdmahtab8991]

@@RohitThakur-sj7en thankyou brother 🙂

[@RohitThakur-sj7en]

@@TheCodingOdyssey I would insist you to give it a try. Everything is far more convenient in Vue.

[@tomvanbrabant3053]

Many thanks for these great tutorials!

[@yadude101]

at 4:00 , aren't yarn🧶installs better for Macs? with npm, a lot of the time you have to do a sudo install, which isn't advisable

[@rickycaron2177]

Hello, I have a question. What if I want to use "job title" to search in the JSON array by the fetch function, rather than using "id"? Is there a way to do so?

[@emil371]

Did you find a way to do this?

[@Viralplace]

Finally you don't explain the lazy-loading route... what is the difference

[@00el04]

so would you rarely fetch JSON data on a local file server?

[@Ln6Ec]

The mounted fetch request within JobDetails isn't working for me for some reason... if I have the (res => res.json()) portion in it, there's an unexpected character error that comes up. If I switch res.json() to res.text() that error goes away, but I get another error saying the requested localhost:3000/jobs/1 isn't found. Can anyone help me please?

[@miloszl0]

add quotation marks to the ID in json file, like this: { "jobs": [ { "id": "1", "title": "Ninja UX Designer", "details": "lorem" }, { "id": "2", "title": "Ninja Web Developer", "details": "lorem" }, { "id": "3", "title": "Ninja Vue Developer", "details": "lorem" } ] }

[@creadigma360]

Very helpful. I have fetched users with '/wp/v2/users' endpoint, but I can only get my own user data, I get a 401 error response when trying to get something like '/wp/v2/users/2'. How can I authenticate in order to get All Users data? I need to lists employees... I tried adding a header argument to the fetch function but it didn't work, I'm guessing It's because headers had already been sent, but I'm new to WP API REST, and to Vuejs, so I don't really know... I'm simply adding Vuejs for a couple of pages, as a script file from a CDN. I only find information about classic ajax so I don't know how to authenticate through API REST and Vuejs P.D. : I had already generated my application password, just don't know where/how to place credentials. Running WP 5.9.3

[@trickytricks3071]

how to get data from list without using loop? I am import array of data from api but i want to you use only one row,so please tell me how to get data using index number... I have tried list[0].title but it shows error

[@fredpourlesintimes]

Interesting and proper way to work with data. Thanks :)

[@mustafaerk3491]

If we got error UI will present still loading bc we didnt change jobs.length or job if we got error but btw it was great tutorial. Its not hard to handle that case . Thank you

[@michalsejak]

Why does this not cause the CORS policy problem? Can anyone please explain that to me?

[@diamondsky6605]

I love your voice you're good for explaining the code Shout-out from France ❤️

[@sudhanwabokade1285]

11:00

[@ramohacks]

Is it a preference to using mounted vs created vs beforeMounted ?

[@yusha790]

keep making vue vids please

[@bryannsi]

how setup vue auto-complete in vscode?

[@adilizm704]

i can't get the data when I pass the id as a parameter to the API how you did that ?? I think you miss a part there ?? any idea

[@yasthatsme]

Watch 14:00

[@derekbressler9154]

vue is the best

[@yaqubyusuf2834]

Thank you

[@rezwansaki]

Thanks :)

[@paycation3966]

Is this tutor British?

[@NetNinja]

Hey yes, I am from Manchester, England :)

[@dlysele]

Hi there, I am just learning Vue and I am creating a map app. I have already placed a geolocation script to output the latitude and longitude values on the DOM but I don't know how to refer the data back to the server, do you have an clue what I should do/look for? Thank you!

[@gokulpisharody3155]

Shaun what about angular course? Any plan to create one.?