programming javascript

Tìm nạp mảng trong javascript

findIndex sẽ trả về chỉ mục của phần tử đầu tiên trong mảng. Nếu không tìm thấy nó trả về giá trị -1. Chúng ta cùng xem một ví dụ nhé

Ở ví dụ trên, các bạn có thể thấy điều kiện là tìm chỉ mục của số > 24 cho nên nếu sử dụng findIndex, chúng ta sẽ nhận được giá trị chỉ mục của số trong mảng điều kiện, ngay sau đó phương thức sẽ dừng lại

method findIndex không hỗ trợ trình duyệt Internet Explorer

Thay vì return về index như findIndex thì chúng ta có method find sẽ trả về phần tử mãn

tìm phương pháp

find[] Trả về giá trị của phần tử đầu tiên trong mảng điều kiện ta cung cấp. Nếu không có giá trị nào đáp ứng thì find sẽ trở về undefined

Một ví dụ về find khi tìm kiếm đối tượng có tên Eminem 😁

method find không hỗ trợ trình duyệt Internet Explorer

Do đó có một số trường hợp chúng ta cần kiểm tra xem phần tử đó còn tồn tại trong mảng không thì làm thế nào?

Bao gồm phương pháp

includes dùng để kiểm tra xem phần tử này có tồn tại trong mảng hay không. Nếu có sẽ trả lại -11 và ngược lại trả lại -12

method bao gồm trình duyệt Internet Explorer không hỗ trợ

phương thức indexOf

-13 Trả về chỉ mục nếu tìm thấy phần tử hoặc -1 nếu không tìm thấy

phương thức lastIndexOf

Nếu như trong mảng có nhiều hơn 1 phần tử cùng giá trị thì khi sử dụng -15 chúng ta sẽ thu được kết quả là chỉ số cuối cùng của phần tử được tìm thấy. Nếu không tìm thấy phần tử tôn vinh nào, ta sẽ nhận được giá trị -1

forEach, bộ lọc

Chúng ta còn một cách như sử dụng vòng lặp và tìm phần tử điều kiện đối xứng đã được chọn. Cùng xem qua ví dụ nhé

cho mỗi

lọc

Tìm phần tử từ mảng khác với mảng còn lại

Đây là một trường hợp chúng ta có thể áp dụng như kiến thức ở trên, các bạn có thể tìm ra cách hay và nhanh hơn nhé

Kết luận

Như vậy là mình đã giới thiệu cho các bạn một số cách để chúng ta có thể tìm thấy một phần từ bất kỳ từ một mảng cho trước. Hy vọng sau khi bạn viết bài này, các bạn có thể áp dụng được các phương pháp này và sử dụng chúng hợp lý trong các bài toán đặt ra

Sử dụng Restful API NodeJS hướng dẫn cách gọi API trong trang web. Có thể gọi bằng hàm tìm nạp, xmlHttpRequest, hoặc sử dụng thư viện Jquery, Axios, AngularJS, VueJS …

Bài viết này hướng dẫn bạn sử dụng Fetch API [hàm tìm nạp] và thư viện axios

Chuẩn bị sẵn sàng để sử dụng api yên tĩnh

Bạn phải có 1 bộ restful API cái đã rồi mới được gọi là, ở bài hướng dẫn RESTful API trong NodeJS, bạn đã thực hiện với một bộ restful API cho sản phẩm. Bây giờ bạn tạo nhanh một bộ khác [người dùng] để phục vụ bài viết này nhé, cũng là dịp để ôn lại những gì đã học ở bài trước

1. Tạo cơ sở dữ liệu và bảng

Vào phpmyadmin, tạo 1 database tên shop [ if có rồi thì khỏi tạo]
Vào cửa hàng cơ sở dữ liệu, tạo bảng tên người dùng như sau

2. Cài đặt module express và express-generator

Nếu máy của bạn đã cài đặt rồi thì bỏ qua, còn chưa thì mở dòng lệnh rồi nhập lệnh npm install -g express , tiếp tục nhập lệnh npm -g install express-generator

3. Tạo dự án để thực hiện tập tin

– Vẫn trong dòng lệnh rồi chạy lệnh. express –ejs SuDungAPI

Bạn sẽ thấy thư mục SuDungAPI xuất hiện, các thư mục và tập tin trong đó

– Chuyển vào thư mục SuDungAPI mới tạo và chạy lệnh cài đặt các mô-đun cần thiết

npm install
npm install mysql

4. Create model connection db

– Tạo thư mục mô hình trong dự án
– Tạo tập tin mô hình/cơ sở dữ liệu. js

var mysql = require['mysql']; 
var db = mysql.createConnection[{   
    host: 'localhost',     
    user: 'root',     
    password: '',     
    database: 'shop' 
}];  
db.connect[function[err] {    
   if [err] throw err;    
   console.log['Da ket noi database']; 
}]; 
module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db

– Tạo tập tin models/users. mã js định nghĩa các hàm để tương tác với mysql

var db=require['./database']; 
exports.list = function[ callback] { 
    let sql = `SELECT *  FROM users`;
    db.query[sql, function[err, d] { callback[d]; }  ];
}
exports.create = function[data, callback ] { //hàm chèn user mới vào table 
    let sql = 'INSERT INTO users SET ?';
    db.query[sql, data, function[err, d] { callback[d] }  ];    
} 
exports.update = function[id, data, callback] { 
    let sql = 'UPDATE users  SET ? WHERE idUser = ?';
    db.query[sql, [data, id], [err, d] => {
        if [err] throw err;
        callback[];
    }];    
} 
exports.read= function[id, callback] {
    let sql = 'SELECT * FROM users WHERE idUser = ?'    
    db.query[sql, id, [err, d] => {
        data = d[0]; 
        callback[data];
    }];
}

5. Tạo bộ điều khiển

– Mở tệp ứng dụng. js, you will see a command app. sử dụng[‘/ user ‘, usersRouter];. Đường định tuyến người dùng đã được tạo sẵn để bạn dẫn vào bộ định tuyến[bộ điều khiển] người dùng. Yêu cầu để từ bỏ việc tạo khác [nhưng nếu muốn có thể sửa đổi hoặc tạo mới]

– Mở tập tin định tuyến/người dùng. js và code

var express = require['express'];
var router = express.Router[];
var db = require['./../models/database'];
var modelUsers = require['./../models/users']; 

router.get['/',  [req, res] => { 
    modelUsers.list[ function[listusers] { res.json[listusers]} ]; 
}];
router.post['/', [req, res] => {
    let data = req.body; 
	  modelUsers.create[data , function[]{
        res.json[{thongbao:"Đã thêm  xong một user mới"}];
    }];
 }];
 router.get['/:id', [req, res] => {
    let id = req.params.id;    
    modelUsers.read[id, function[u]{
      res.json[u];
    }];
 }];
 router.put['/:id', [req, res]=> {
      let data = req.body;
      let id = req.params.id;
      modelUsers.update[id, data, function[]{
        res.json[{thongbao: 'Đã cập nhật user '}];
      }]
 }];
 module.exports = router;

Bài kiểm tra. Sử dụng người đưa thư để thực hiện bài kiểm tra. xem danh sách người dùng, xem chi tiết 1 người dùng, thêm 1 người dùng , cập nhật 1 người dùng. Tất cả phải thành công nhé

Chuẩn bị công việc đã hoàn thành. Giờ thì gọi nó trong trang web thế nào?

Sử dụng hàm fetch[] để gọi API

Trong Javascript, hàm fetch[url,options] là một hàm dùng để gửi và nhận yêu cầu đến tài nguyên ở xa. You use this function to done the call of APIs made

Create request with method get

Dưới đây là cấu trúc cơ bản của hàm tìm nạp để gọi 1 tài nguyên ở xa với phương thức get. If when request that has error what that, the section. bắt sẽ chạy. Kết quả còn lại từ máy chủ sẽ chuyển tới. sau đó trong phản hồi của biến, Bạn sử dụng phản hồi của biến này để đánh giá kết quả trả về có ok không rồi chuyển nó sang dạng dữ liệu cần thiết để xử lý ở các. rồi sau

window.fetch['//…']
.then[function[response] {
  //đánh giá response và chuyển dữ liệu cho .then sau
}]
.then[function[data] {
  // xử lý dữ liệu và chuyển dữ liệu cho .then sau
}]
.then[function[data] {
  // xử lý dữ liệu 
}]
.catch[function[error] {
  console.log['Co loi : \n', error];
}];

Ví dụ 1. API call function

1. Tạo tuyến đường. Open routes/index. js và code

router.get['/danhsachuser', [req, res] => {
  res.render["listusers"];
}];

2. Tạo lượt xem/người dùng danh sách. ejs

Danh sách users

3. Bài kiểm tra. Chạy dự án [npm start] rồi mở trình duyệt nhập http. //máy chủ cục bộ. 3000/danhsachuser , nếu thấy chữ Danh sách người dùng là OK

4. Mã gọi API trong chế độ xem mới tạo [sau thẻ h1]

 
fetch["//localhost:3000/users/"]  
.then[function[res] {
    console.log[res]; //xem thử trong console của trình duyệt nhé
    if[!res.ok] {throw new Error["Lỗi = " + res.status]; }
    return res.json[];
}]
.then[function[data] {
    console.log[data];//xem thử trong console của trình duyệt nhé
}]
.catch[function[error]  { 
    console.log["Lỗi: ", error];
}]

Xem lại thử trang http. //máy chủ cục bộ. 3000/danhsachuser , will see in console

Ví dụ 2. Có thể gọi API theo cách không có các hàm nối lại với nhau

________số 8_______

Hàm tìm nạp yêu cầu tạo url, nhưng dữ liệu không có ngay. Đợi đến khi có kết quả trả lời phản hồi sẽ chuyển đến hàm kiemtra để xử lý, công việc xử lý bao gồm kiểm tra trạng thái ok từ máy chủ và chuyển nội dung của phản hồi thành dạng json, sau đó trả về cho hàm xulydulieu. Hàm xulydulieu sẽ đọc dữ liệu json để xử lý và hiển thị tùy chọn theo yêu cầu. Trong quá trình hoạt động của tìm nạp, nếu có lỗi thì điều khiển sẽ đến hàm trong phần bắt để xử lý [xulyloi]

Chú thích. nếu muốn bạn có thể thêm nhiều lệnh. then to handle tuần tự dữ liệu nếu muốn

Đọc dữ liệu từ 1 đối tượng json

Dữ liệu đối tượng json đổ về từ máy chủ là dữ liệu dạng văn bản có cấu trúc , được trình duyệt hỗ trợ nên rất dễ đọc

you try. Use API HTTP browser. //máy chủ cục bộ. 3000/users/1 sẽ thấy chi tiết người dùng 1 ở định dạng json. Yêu cầu API rồi hiện ra rất dễ dàng

1. Tạo tuyến đường. Open routes/index. js và code

router.get['/chitietuser', [req, res] => {
  res.render["chitietuser"];
}];

2. Tạo lượt xem/chitietuser. ejs

var mysql = require['mysql']; 
var db = mysql.createConnection[{   
    host: 'localhost',     
    user: 'root',     
    password: '',     
    database: 'shop' 
}];  
db.connect[function[err] {    
   if [err] throw err;    
   console.log['Da ket noi database']; 
}]; 
module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db

3. Bài kiểm tra. Chạy dự án [npm start] rồi mở trình duyệt nhập http. //máy chủ cục bộ. 3000/chitietuser , nếu thấy chữ Chi user là OK

4. Mã gọi API trong chế độ xem mới tạo [sau thẻ h1]

var mysql = require['mysql']; 
var db = mysql.createConnection[{   
    host: 'localhost',     
    user: 'root',     
    password: '',     
    database: 'shop' 
}];  
db.connect[function[err] {    
   if [err] throw err;    
   console.log['Da ket noi database']; 
}]; 
module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db

Kết quả là bạn sẽ thấy dữ liệu thân thiện , theo cách bạn muốn trình bày cho người dùng xem

Đọc các dãy đối tượng json

you try. Use API HTTP browser. //máy chủ cục bộ. 3000/users/ sẽ thấy mảng người dùng 1 ở định dạng json. Yêu cầu API rồi hiện ra cũng rất dễ dàng

Open views/listuser. ejs rồi mã trong hàm xulydulieu để được như sau

var mysql = require['mysql']; 
var db = mysql.createConnection[{   
    host: 'localhost',     
    user: 'root',     
    password: '',     
    database: 'shop' 
}];  
db.connect[function[err] {    
   if [err] throw err;    
   console.log['Da ket noi database']; 
}]; 
module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db

Thêm thẻ div sau thẻ h1 để chứa kết quả

var mysql = require['mysql']; 
var db = mysql.createConnection[{   
    host: 'localhost',     
    user: 'root',     
    password: '',     
    database: 'shop' 
}];  
db.connect[function[err] {    
   if [err] throw err;    
   console.log['Da ket noi database']; 
}]; 
module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db

Xem thử kết quả. http. //máy chủ cục bộ. 3000/danhsachuser , will see results

Gọi API với phương thức POST

Hàm tìm nạp[url,tùy chọn] giúp gửi yêu cầu đến tài nguyên ở xa, trong đó tùy chọn là cấu hình chi tiết cho hàm. Cách sử dụng có thể thực hiện thông qua ví dụ sau

– Định tuyến/chỉ mục tệp. js

var mysql = require['mysql']; 
var db = mysql.createConnection[{   
    host: 'localhost',     
    user: 'root',     
    password: '',     
    database: 'shop' 
}];  
db.connect[function[err] {    
   if [err] throw err;    
   console.log['Da ket noi database']; 
}]; 
module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db

– Tạo file views/dangky. ejs

var mysql = require['mysql']; 
var db = mysql.createConnection[{   
    host: 'localhost',     
    user: 'root',     
    password: '',     
    database: 'shop' 
}];  
db.connect[function[err] {    
   if [err] throw err;    
   console.log['Da ket noi database']; 
}]; 
module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db

- Bài kiểm tra. http. //máy chủ cục bộ. 3000/dangky ==> nhập thông tin rồi nhắp Đăng ký sẽ lưu thành công vào cơ sở dữ liệu

Sử dụng thư viện Axios

Axios là một thư viện giúp bạn gửi yêu cầu http đến các ứng dụng API. Axios used both at browser or Node. js. Sử dụng Restful API NodeJS sẽ dễ dàng hơn với thư viện này