Thêm/sửa/xóa khóa học với Fetch và REST API

[@vuthuatha1777]

Hôm nay em mới phỏng vấn xong. Với vị trí frontend. Những câu hỏi người tuyển dụng hỏi đều có hết trong những kiến thức anh đã dạy. Và họ đáng giá tốt về buổi phỏng vấn. Em thật sự cảm ơn anh đã cho em những kiến thức bổ ích này. Em sẽ cố gắng hơn nữa. Em chúc anh và gia đình anh thật mạnh khỏe và nhiều niềm vui. I love Mr. Sơn

[@F8VNOfficial]

Chúc mừng em nha

[@hieptrinh8215]

bạn phỏng vấn fresher hay intern ạ?

[@GiangNguyen-cg8nm]

Cho mình hỏi là những phần nào của F8 channel được hỏi trong buổi phỏng vấn vậy ạ?

[@PhongLe-zd9iw]

ngta hỏi những gì vậy bạn chia sẻ mình với đc ko bn

[@hieptx1909]

@@F8VNOfficial Anh Sơn ơi còn các phần dưới như localStorage, ... các thứ khác thì anh để ở series nào vậy ạ, em học xong js cơ bản lẫn nâng cao rồi nhưng k thấy ạ

[@HuaTonat]

em cám ơn anh Sơn, mong a nhiều sức khoẻ và đầy nhiệt huyết để truyền lửa cho những đứa tụi em, cám ơn a vì những kiến thức của a mang lại. Em hóng anh dạy reactjs quá :))

[@HuyNguyen-vl4yl]

Quá hay , e xem xong bài này tổng hợp cả 1 hệ thống kiến thức cộng với việc cleancode

[@namvo7544]

Loay hoay tí cũng làm được cái sửa mừng quá

[@nguyenhuuhoan5687]

🍜 Hay quá anh ơi 🥳, giúp em hệ thống lại kiến thức + clean code hơn nhiều ạ ✅

[@vuongqtvn]

quá tuyệt vời anh ơi

[@katynguyen287]

Toát mồ hôi hột viết xong cái tính năng sửa, mà viết xong cảm giác thông não quá ạ

[@chienphung9633]

bạn còn source code phần đó ko cho mình xin với

[@luukhoigaming510]

Wow what an acNice tutorialevent! Best of luck for the rest of your future, I’m looking forward to being able to invest when I turn 21 in November!

[@matis4779]

Hay quá a

[@hoaimiqng]

Loving you

[@guardian3869]

code cho ae tham khảo phần edit nhe: 1. thêm class vào trong phần render ${course.name} ${course.description} 2. tạo 2 function , 1 function edit , 1 function để xử lý trong edit function editFormCourse(id, data, callback) { var options = { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data) }; fetch(courseApi + '/' + id, options) .then(function(response){ response.json(); }) .then(callback) } function handleEditFormCourse(id){ // lấy class cho từng phần tử name và description var name = document.querySelector(".name-" + id); var desc = document.querySelector(".desc-" + id); var btnEdit = document.querySelector('#create'); // lấy ra ô input var nameInput = document.querySelector('input[name="name"]'); var descriptionInput = document.querySelector('input[name="description"]'); if (name && desc) { // nếu có nameInput.value = name.innerText; // gán ô input = giá trị của name descriptionInput.value = desc.innerText; btnEdit.innerText = "Save"; } btnEdit.onclick = function() { var formData = { name: nameInput.value, description: descriptionInput.value } editFormCourse(id, formData, function () { getCourses(renderCourses); }) // edit xong thì trả về lại tạo form btnEdit.innerText = "Create"; nameInput.value = ''; descriptionInput.value = ''; handleCreateForm() } }

[@lailalongdey]

không đc ạ

[@lequangnghia1403]

tks ban :3

[@the2hg442]

Anh ơi cho em hỏi là trong hàm createCourse thì nó chuyền đi dữ liệu để thêm vào trong file db.json sau đấy hàm renderCourse sẽ map vào trong cái dữ liệu đó thì tự động sẽ render ra dữ liệu thêm vào khi tạo mới mà anh đâu cần gọi cái promise callback để render dữ liệu trong hàm createCourse để render lại anh, em không viết đoạn ấy vẫn render dữ liệu ra bình thường ý

[@thanhlongle4968]

tôi cũng thấy vậy ông ạ, nó truyền new courses vào rồi, thì thằng render nó tự xử lý đâu cần phải promise callback nữa phải ko

[@tnln7893]

Quá hay, anh làm vài video chuyên sâu về chủ đề này được không ạ, e không tìm thấy nhiều nguồn học về API lắm

[@tamlongnguyen6604]

cho e hỏi chút ạ ... khi e ấn button thêm sửa xóa thì nó reload lại trang... không biết do e code sai chỗ nào hay do postman ạ?/ e cảm ơn

[@NamHoang-wk8ik]

7:53 dùng phím tắt nào để nhảy ra thẻ trong template string vậy ạ.

[@ThanhTran-yz4po]

mn đổi extension: Preview on Web Server là không bị refresh lại trang nha

[@uctamnguyen1593]

thanks anh Sơn dzai

[@inhxuanhanh3978]

Cái callback ảo thiệt đó

[@lightd1404]

ôi cuối cùng cũng làm đc cái thêm sửa mừng ỉa chảy =))

[@chienphung9633]

bạn ơi cho mình xin code phần edit với

[@lightd1404]

@@chienphung9633 Lâu quá roi mh xóa mất phàn đó lun r =))

[@yukitran2426]

Anh ơi ! Nào anh ra Reactjs vậy anh.Ngồi hóng quá anh ơi

[@tuananh-tp8op]

sao e post dữ liệu đều bị refresh trang vậy ạ, sử dụng postman cũng bị tự tải lại, làm sao để tắt tự tải lại khi đẩy dữ liệu vậy ạ, (vấn đề không phải ở bên html đâu ạ chỉ khi đẩy dữ liệu mới bị)

[@TrongNguyen-ym8ts]

Em có thắc mắc là mỗi lần bấm thêm hoặc xóa thì minh sẽ gọi API vậy khi gọi đó nó có làm refresh lại trang của mình k ạ... do em thấy code của anh nó k refresh trang mà khi em làm theo cách của em thì mỗi lần như v nó cứ refresh lại trang

[@igdev6095]

30:55 tại sao xóa mất ở DOM mà database cũng bị mất lun là sao vậy a

[@igdev6095]

à mình hiểu r, bn nào biết cmt thử xem coi có cùng ý kiến k

[@fairyofworld]

bạn gửi một cái request bằng fetch với method là delete thì json-server nó tự hiệu thì nó tự xóa ở db thôi, còn cái việc xóa mất ở DOM chỉ là xử lí phía client để người dùng có thể thấy được mà không cần refresh lại trang. Vì khi refresh lại thì nó sẽ chạy lại hàm start() là sẽ call lại api get nên giảm hiệu năng

[@nguyenhuykhaik16_hcm36]

@@igdev6095 bác hiểu khúc này, giải thích lại giúp em với ạ. Vì xóa ở DOM mà không gửi request DELETE thì không thể xóa ở Database được ạ.

[@enzo4828]

anh ơi, phiền a update nốt phần edit course được không anh.

[@chaucong8095]

tại sao lúc em POST thì id lại ra số ngẫu nhiên chứ không ra thep thứ tự như anh ạ

[@ddung203]

đoạn 29:40 e làm như vậy rồi nhưng mà sao nó vẫn reload lại trang nhỉ :

[@SonTran-im1bd]

mn cho e hỏi, trong cái phương thức xóa, nếu mà e sử dụng id là số thì nó xóa bthg, nhưng mà khi dùng cái ID mà khi ta create nó tự tạo(của mk là nó tạo 1 chuỗi random) thì lại ko đc là sao ạ?

[@sitran6342]

Cho mình hỏi chỗ đoạn 4:20 chỗ đoạn callback mình m hiểu rõ lắm ai giải thích cho mình hiểu với

[@lewiswill3663]

Bạn làm hướng dẫn về FormData đi ạ!

[@nguyenvanthanh845]

anh dạy cách viết API bóc tách dữ liệu web đi ạ

[@quanghuynguyen2929]

Mọi người ơi cho em hỏi khi em tạo 1 khoá học mới thì id không phải là số mà lại là kiểu 6fd5, 937a,... vậy ạ

[@truongnguyen8325]

Unexpected token 'i', "title=danh%20sach%20" is not valid JSON anh ơi em làm như anh ấn post rồi thêm key-value nhưng mà posman hiện thông báo lỗi như này anh ạ

[@TrickItonline]

anh có thể hướng dẫn em sử dụng response header của backend và frontend như thế nào cho chính xác được ko ạ

[@vancongang3092]

Anh ơi cái posman có dùng nhiều ko ạ, e tải về vs cop link vào chạy nó lỗi ạ, ko hiểu sao

[@voxuanhoa1166]

mong anh Sơn ra thêm Video về asyns await

[@F8VNOfficial]

Rảnh anh ra thêm sau nhé

[@voxuanhoa1166]

@@F8VNOfficial ok anh, em dân trái nghành, giờ kiểu bị nghiện giọng anh Sơn rồi, lúc nào cũng hóng video mới từ anh

[@dusw20-phamvan58]

anh ơi, cái đoạn courses.map(function(course) sao của e nó cứ báo là courses.map is not a function vậy nhỉ

[@TungPham-dt6tr]

b paste code lên đây mn chỉ cho b

[@GiangDuongTruong-xq2cm]

@@TungPham-dt6tr var courceAPI = '127.0.0.1:5500/db.json'; function start(){ getListing(renderListing); } start(); function getListing(callback){ fetch(courceAPI) .then(function(respone){ return respone.json(); }).then(callback); } function renderListing(coures){ var listing = document.querySelector("#list"); } // mình bị y chang lỗi như bạn

[@haipd4811]

anh Sơn ơi cho em hỏi là có thêm được dữ liệu dạng ảnh không ạ

[@NamPham-yp1lo]

Cho mình hỏi đôi chút ạ?Ví dụ mình làm cái api nó trả về cho mình đối tương json chạy trên trình duyệt web á,nhưng đó chỉ là local.Nhưng minh muốn dùng 1 cái máy khác truy cập vô cái link đó vẫn lấy được đối tượng json trả về .Bước tiếp theo là cần làm gì ạ?Mình xin cảm ơn!

[@nhatnguyen381]

Anh ơi. cho em hỏi. bây giờ em fetch data ra rồi. em muốn ấn vào 1 sản phẩm thì nhảy đến 1 template mới rồi hiện ra danh sách sản phẩm. thì làm như nào ạ?

[@ngoctruongtran9641]

a có khóa học offline nào không

[@Hiendeptrai2205]

cho mình hỏi sao mình ko thấy các bài như localstrorage va sessionstorage vậy ạ

[@centralsports1557]

Gọi Fetch với method:POST mà cứ bị auto repeater, mỗi lần refesh code hoac page tự động add 3 - 4 record data là do lỗi gì vậy thầy? Cám ơn thầy!

[@truongnguyen8325]

bạn sủa nhu ưnafo vậy mình cũng biij

[@tientruong9315]

tai sao khi mình chọn create thì mọi thứ ok tuy nhiên id thì không theo thứ tự tăng dần mà nó là số random , vì thế mình không delete được @@

[@thhuyen02]

cho mình hỏi từ bài 6: DOM location đến bài 10 sao mình không thấy có video vậy ạ?

[@T.quTung]

A ơi tại sao khi e thay đổi dữ liệu json server web nó bị tự load lại

[@F8VNOfficial]

Em bỏ json server ra khỏi dự án HTML đang chạy với live server em nhé.

[@nguyenvanbao4362]

cho em hỏi sao mỗi lần em gửi đi api để tạo khóa học mới thì web nó auto load lại có cách nào để khắc phục không ạ em cảm ơn

[@thutrananh6061]

mình cũng bị như vậy mà không tìm ra cách khắc phục

[@t04n26]

e.preventdefault()

[@dungphanquang3512]

good

[@baoduy7198]

Hóng ReactJs quá

[@leolemon4505]

cái của em gửi request đi chưa kịp dụng then() bắt reponse thì nó tự f5 lại trang @@

[@aduhacker]

bạn fix được chưa chỉ mình với

[@TienPhan-ih6ij]

Đọc cmt hóng xem có ai làm edit không mà không thấy

[@truonggiangnguyen3693]

Mn ơi mình muốn học phần này từ bài đầu tiên, cho mình hỏi bắt đầu từ bài nào ạ

[@laocong2537]

16:00 25:31

[@luisdato1712]

Anh ơi em có 1 file json up lên github nhưng khi fetch file đó vs đường link của github thì nó bị lỗi, anh giúp em fix lỗi đc ko ạ

[@F8VNOfficial]

Lỗi như nào em ơi, console có báo đỏ gì ko em ơi?

[@khoa1582]

Ra video tiếp đi anh ơi

[@sunkid8293]

Sao code e chạy tới đoạn fetch() method POST nó cứ refesh lại trang.

[@minhtanpham5357]

mình cũng bị giống vậy, xóa hay create nó cũng tự refesh lại

[@naturalsound3114]

sao em check cai network no cu hien ra GET method hoai vay mn mac du minh use POST vs DELETE

[@Longvis04]

bạn giống mình. Không hiểu sao bị vậy luôn. Bạn giờ có fix được chưa ạ

[@BackendNestJs]

sao em create toàn ra obj thôi ạ , mặc dù code giống anh luôn ạ

[@hieptx1909]

Anh Sơn ơi còn các phần dưới localStorage, ... các thứ khác thì anh để ở series nào vậy ạ, em học xong js cơ bản lẫn nâng cao rồi nhưng k thấy ạ

[@ChangMasbu]

kênh cũ của anh sơn có giảng về phần đó ấy bạn , bạn search với key đấy là ra luôn

[@luisdato1712]

@@ChangMasbu kênh cũ của anh sơn là kênh nào vậy bạn

[@hieptx1909]

@@ChangMasbu bạn ơi kênh cũ của anh ấy là gì vậy bạn

[@資工系日四技阮黃英]

Mọi người ơi cho mình hỏi function handleDeleteCourse(id) { var options= { method:'DELETE', headers: { 'Content-Type': 'application/json', } } fetch(courseAPI+'/'+id,options) .then(function(response) { response.json(); }) .then(function(){ var courseItem = document.querySelector('.course-item-'+id); if(courseItem) { courseItem.remove(); } }); Hàm handleDeleteCourse của mình không gọi lại API mà sao mỗi khi mình thực hiện xóa đi một course thì tự động load lại trang vậy.

[@atnguyen5240]

chắc do extension của Live Server đấy bạn

[@lightd1404]

b tách file của json sever riêng file của html css riêng nhá b là sẽ hết

[@TuTran-th3wd]

Cho mình hỏi tại sao lại dùng method delete lại phải /id nhỉ

[@kanekiken3770]

id là khóa chính nhé xóa khóa chính là xóa hết body

[@onggiao7979]

tại api để xóa post của json server là local..../post/id với method là Delete

[@imthinh.helloworld7925]

tại sao chrome của em nó cứ tự reload lại trang vậy ạ

[@nguyenvanucok15dn61]

cùng câu hỏi, chrome của mình cũng vậy, mình tưởng mình code sai

[@vienong2772]

@@nguyenvanucok15dn61 bạn để nơi JSON ra folder khác nhé, còn folder html ra folder khác (Kiểu nó bị chung với live-server ý)

[@leephan1912]

​@@vienong2772Thanks bác nó ko reload rồi. Nhưng mà ném nó sang folder khác phải bật 2 cái vscode 1 cái để chạy json server với 1 cái để code hả bác? Mình phải bật 2 cái mới được, chứ đổi sang folder khác là json server nó sập luôn :D

[@tomtoan8131]

@@leephan1912 ở VScode bác chọn file-> add folder to workspace để thêm folder server vào workspace hiện tại nhé

[@leephan1912]

@@tomtoan8131 mình bật cmd cho nó chạy riêng với vscode luôn r bác. :v thấy cũng tiện.

[@leephan1912]

e có thắc mắc là lúc ở hàm renderCourse() e có thêm tên cho class h4 với p, mà khi querySelector ra ờ dưới start() hoặc ở trong start() đều ra null nhỉ? chỉ khi bỏ vô các hàm event thì mới query ra.

[@quocnhiennguyen1246]

có phải bạn thêm file js ở head đúng ko, nếu v thì chuyển đoạn ấy xuống dưới thẻ h4 với p là đc nha

[@james-rx8kw]

anh ơi sao anh khóa hết mấy bài giảng v ạ

[@khong2247]

Em làm y hệt vậy nhưng tại sao createCourse(formData); ko cần gọi đến render mà mỗi lần tạo nó vẫn tự động render ạ? E vẫn ko sửa được... function createCourse(data, callback) { fetch(courseAPI, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), }) .then(function (response) { return response.json(); }) .then(callback); } function handleCreateForm() { var createBtn = document.querySelector("#create"); createBtn.onclick = function () { var name = document.querySelector("input[name='name']").value; var desc = document.querySelector("input[name='desc']").value; var formData = { name: name, desc: desc, }; createCourse(formData); }; }

[@tamthachchi8486]

do Live Server của VScode. Để thư mục json_server ở một nơi riêng để tránh khi auto save db.json dẫn đến reload cái page đang viết

[@phongtranquoc7557]

@Huu Hoang Pham bạn có câu trả lời chưa ?

[@canhpham7163]

Ai biết extension gợi ý code cho javascript (onclick = funtion (){} ....) ở phút 12:38 không ạ? chỉ em vs . Thank a

[@codeiha7487]

tìm mấy cái keywords như: html, js, es6 ... + thêm snippets

[@heofa7733]

lời khuyên cho anh em là hãy nắm chắc bài form validation rồi hãy chiến tới bài này nhé. Nếu không là sẽ lùng bùng đấy =))

[@namnguyennhat6493]

Mà ở trên trang F8 thì nó lại nằm chung trong phần JSon luôn ông 😢 nên tới này cái mơ mơ liền

[@honglexuan3930]

ai giúp mình với ạ, mình create thành công rồi nhưng id không tăng dần mà lại thành một chuỗi ramdom

[@lightd1404]

ảo z cho mình xem code được không =))

[@Longvis04]

bạn cũng y hệt mình

[@YunaCrystal3009]

ai cho mình xin code phần sửa với

[@ltxvlogs1944]

Có ai làm phần update rồi không.Cho mình tham khảo nhé

[@_PhanQuocTrieu]

có chưa bác t xin tham khảo với viết k đc :((

[@thangnguyenchien6986]

@@_PhanQuocTrieu function updateCourse(id,data,callback){ var options = { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) } fetch(coursesAPI + "/"+id,options) .then(function(response){ return response.json(); }) .then(callback) } function handleUploadForm(id){ var courseItem= document.querySelector(".course-item-"+ id); var getName=courseItem.querySelector("h4").innerText; var getDescription=courseItem.querySelector("p").innerText; var name=document.querySelector("input[name='name']") var description=document.querySelector("input[name='description']") name.value=getName; description.value=getDescription; if(!document.querySelector("#update")){ document.querySelector("#create").id="update" } document.querySelector("#update").innerText="Luu"; var btnUpdate=document.querySelector("#update") btnUpdate.onclick=function(){ var formData={ name:name.value, description:description.value, }; if(name.value != "" && description.value !=""){ updateCourse(id,formData,function(){ getCourses(renderCourses); document.querySelector("#update").id="create"; document.querySelector("#create").innerText="Create"; name.value=""; description.value=""; handleCreateForm(); }) } else{ alert("Ban hay nhap day du thong tin") } } }

[@LongHoang-sg5mc]

@@thangnguyenchien6986 b còn giữ source code không cho mình xin với ạ

[@_PhanQuocTrieu]

Quên hết rồi bác ạ :V

[@nguyenngochai0z]

E call api toàn bị lỗi cros

[@tiennk439]

anh ơi cho em bài học ` ${ } ` với ạ . em xin cảm ơn ạ

[@nguyenucbao4503]

Đây bạn kzbin.info/www/bejne/bX3WXpmXbc6JjqM Trong phần về js es6 anh sơn có nói về cái này

[@Longvis04]

Mọi người cho mình hỏi. Tại sao mỗi lần mình điền dữ liệu xong create thì id nó không hiện theo thứ tự mà nó bị hiện lung tung nhỉ

[@goodboii9020]

fix được chưa bạn, mình cũng bị

[@lona_1421]

Theo mình nghĩ, Id này là do nó tự tạo ra nên là không theo thứ tự đó kiểu 1 rồi đến 2 đó bạn.

[@chienphung9633]

có ai ko hiểu chỗ callback ko mình giải thích cho

[@nguyentrung9023]

ai giải thích em đoạn ném callback vào với 4.30

[@canhpham7163]

mình cũng không rõ chỗ đấy như thế nào , sao lại cho callback ở đấy xong lại đưa vào trong getCourses(callback). tưởng đoạn 4.30 là funtion(course ){} xong gọi lại callback ở chỗ khác chứ nhỉ ? bạn hiểu đoạn đó chưa, giải thích giúp mình với

[@igdev6095]

@@canhpham7163 ở trong hàm start( ) nó gọi hàm getCourses( ) rồi truyền 1 function in ra các khóa học vào cho nó, sau đó thằng ".then(callback)" có tham số là callback nhận đc function kia rồi in ra các khóa học đó b

[@16.nguyenandung8]

có ai có code a ko ạ :v e xin vs

[@lightd1404]

code rì b =))

[@nguyenvankhanh3788]

ai có code phần này k gửi mình với mình code theo nhưng nó luôn bị call api mỗi khi xóa hoặc tạo mới mặc dù đúng với video

[@letuananh7586]

Giống mình không hiểu tại sao luôn

[@letuananh7586]

Bị load lại trang khi xóa hoặc thêm

[@phongtranquoc7557]

@Hoàng Hà giúp mình với

[@TuanPham-ur8ck]

dạ em làm theo anh khi tới method 'POST' thì trang web tự động reload lại và hiện lên tất cả khóa học mà không cần gọi renderCourse() hoặc getCourse(). Có cách nào để fix vấn đề này ạ. Em cảm ơn.