https://github.com/mushfiqur-rahman/google_spreadhseetapi_mui_autocomplete
Google Spreadsheet to REST API to Python Django to React MUI Autocomplete
https://github.com/mushfiqur-rahman/google_spreadhseetapi_mui_autocomplete
django django-rest-framework google-spreadsheet-api mui-autocomplete mui-material mushfiqfeed python reactjs rest-api spreadsheet vitejs
Last synced: about 1 month ago
JSON representation
Google Spreadsheet to REST API to Python Django to React MUI Autocomplete
- Host: GitHub
- URL: https://github.com/mushfiqur-rahman/google_spreadhseetapi_mui_autocomplete
- Owner: mushfiqur-rahman
- Created: 2023-05-26T16:38:17.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-05-28T17:14:55.000Z (almost 2 years ago)
- Last Synced: 2025-02-05T13:41:58.486Z (3 months ago)
- Topics: django, django-rest-framework, google-spreadsheet-api, mui-autocomplete, mui-material, mushfiqfeed, python, reactjs, rest-api, spreadsheet, vitejs
- Language: JavaScript
- Homepage:
- Size: 78.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MUI Autocomplete using Django Rest API and Google Spreadsheet API
I made this task(this is not project) for learning purpose where I converted Google Spreadsheed to REST API, then converted data formation using python django and after that I used it on React MUI autocomplete.
### Tutorial
[](https://www.youtube.com/watch?v=XRjLqDjeHjY)
____
[Google Spreadsheet Link](https://docs.google.com/spreadsheets/d/1RbnStR4xLjHkSoDsGCO7xHwCl3WhASFZDHGQIY8OdvQ/edit?usp=sharing)
Which `code` I have use at `apps script` of Google spreadsheet:
__Apps Script__
> If you use below code then your data will show
```javascript
function doGet(req) {
var doc = SpreadsheetApp.getActiveSpreadsheet();
var sheet = doc.getSheetByName('q3');
var values = sheet.getDataRange().getValues();
var output = [];
for(var i = 0; i< values.length; i++) {
var row = {};
row['Item ID '] = values[i][0];
row['Item'] = values[i][1];
row['tag 1'] = values[i][2];
row['tag 2'] = values[i][3];
row['tag 3'] = values[i][4];
output.push(row);
}
return ContentService.createTextOutput(JSON.stringify(output)).setMimeType(ContentService.MimeType.JSON);
}
```
__output__
```json
[
{
"Item ID ": "Item ID",
"Item": "Item",
"tag 1": "tag 1",
"tag 2": "tag 2",
"tag 3": "tag 3"
},
{
"Item ID ": 30003,
"Item": "Thesis",
"tag 1": 101,
"tag 2": 103,
"tag 3": ""
},
{
"Item ID ": 30004,
"Item": "Meditation",
"tag 1": 110,
"tag 2": 101,
"tag 3": 111
},
{
"Item ID ": 30005,
"Item": "Helping",
"tag 1": 403,
"tag 2": 203,
"tag 3": 120
},
{
"Item ID ": 200669,
"Item": "YouTube",
"tag 1": 542,
"tag 2": 87,
"tag 3": ""
}
]
```
> here is the problem is spreadheet all columns has not values. For this problem I used below code.
```javascript
function doGet(req) {
var doc = SpreadsheetApp.getActiveSpreadsheet();
var sheet = doc.getSheetByName('q3');
var values = sheet.getDataRange().getValues();
var studentQ3 = values.map(function(row){
var formattedRow = [];
for( var i =0; i npm install & npm run dev
```
Now open your browser & got to the url
```url
http://127.0.0.1:5173/
```
___
__For Backend setup__
```bash script
$ cd backend
```
```bash script
$ backend > py -m venv venv
```
```bash script
$ backend > venv\scripts\activate
```
```bash script
$ backend > venv\scripts\activate
```
```python
(venv) PS D:\backend> python -m pip install -r requirements.txt
```
```bash script
(venv) PS D:\backend> py manage.py migrate
```
```bash script
(venv) PS D:\backend> py manage.py runserver
```
### Student Needs API URL
```
http://127.0.0.1:8000/q1/
http://127.0.0.1:8000/q2/
http://127.0.0.1:8000/q3/
```
**Post URL**
```
http://127.0.0.1:8000/api/services/
```
### Material UI Autocomplete
