Fetching Data From MySQL as Json in ReactJs - javascript

The bounty expires in 7 days. Answers to this question are eligible for a +50 reputation bounty.
Om Nigam wants to draw more attention to this question.
How do i fetch data from my MySql database as json and then use it in react js...? actually i'm new to React and MySql so i just don't know much about it.. Please help

React is not allowed to connect to MySql directly. We need NodeJs to start a back-end server which supporting HTTP API.
You can watch this video, and try to create your demo.
React Node.js MySQL CRUD Tutorial for Beginners

I agree with YinPeng.Wei's idea for setting up a backend server to retrieve data from database. The majority programming language for backend development have packages or libraries to connect with Database.
A similar question was asked years ago about How to connect to SQL Server database from JavaScript in the browser?. The answer is you could do that but it is high discouraged.
The general idea is to create a simple backend server which responds to your React frontend requests. Backend retrieves data from MySQL via sql query, then serialize searched data into JSON format and gives back to your frontend.
Not sure which type of programming language would you choose for backend development. I would do either one of Python, C#, Java for a quick demo.

Typically, you are using React to connect to another app (backend) via an API e.g. REST, THAT backend is the one who connect to the database and passes the data to your React app.
Your react app doesn't even know there is a database, all he knows is the backend that's feeding him. without him he's just a pretty looking dead app.
now from your backend, you have two ways, using languages built-in driver to connect to your database directly (hand writing SQL statements), Or you may use an ORM, just google "js orm" and you will find many.
As a start, you need to learn more about creating a simple REST API with whatever language you choose, and then simply use fetch("http://example.com/whatever").then(res=> JSON.parse(res)).then(res=> console.log(res))
the code above should show you whatever you see on the screen when you actually visit the URL inside fetch() from the browser, just text.
REST itself is just a way to use HTTP that people like.
the browser itself is just another client (like your React app), if he can do it so does your app.

first, you have to solve the console error of key of react, give the key wherever you

Related

How to setup security for Azure Function so it can send a request to an Azure App Registration and get data from GraphAPI

I am brand new to a lot of Azure technology. I have familiarity with Graph API and JavaScript but have limited knowledge of C#.
Problem:
I need to write an Azure Function that queries an Azure App Registration that has the application permission 'Reports.ReadAll' and I need to do this in a secure method. This is to get data from Microsoft Graph Api. I want to do it in a way without writing the App Registrations Client Credentials in the code as that might be risky.
End Goal:
I am planning on collect the response from the App registration call and getting a url to a CSV file which I will Store somewhere (likely SharePoint). But this questions is about the first part, sending a request to the app registration securely and getting a response.
I have done quite a bit of research so far, and it seems I need to achieve my goal by writing a function in C# or JavaScript (preferably JavaScript, but any solution is welcome). To get the security I need some bits on the Internet say I need to Use Azure Key Vault so I am not store Client Credentials in plain text in the code?
I also need to get the bearer token first it seems according to my research, and I need to then include that in the call for the report's data I need, but I haven't been having much luck their either.

How to read in sqlite information in javascript without writing your own API?

Most of my experience with database manipulation has been through node.js, and writing simple APIs for class. I'm now trying a private project, where I would write a database, and read in information from it to display on a website hosted through github. however, for what I'm doing, an API seems unnecessary, as I should be able to upload the database file onto github, and have the website read from that, rather than hosting a node.js server. So, what I'm asking is at a high level, how would I get information from a database into a form I can read onto a website, and would just creating a json locally, or storing the info some other way, be a better solution?
If the database is very large, then this really should be done server side.
If the database is small, one option is to convert the sqlLite database to JSON, and then just use fetch to grab, and just parse using Javascript.
But another option I think you might like, is use a sqLite client compiled for the browser. If your browser is relatively new and supports webAssembly you might find this interesting.
https://github.com/sql-js/sql.js
Basically sqLite compiled for the browser..
One issue with any of these is security, anybody could of course download the JSON or Sqlite database in full and have full access. Server side you can implement user authentication etc.

How would I transfer data from a Node.JS web app to a JavaScript client on another website/server?

I have a Node.JS backend running on Heroku which pulls data from a Google sheet. This app will run once a day to pull updated data from the Google Sheet.
I also have a client written in HTML, CSS & JS which will need to draw that data from the backend.
The problem is, the client runs on a different server than than the Node.JS backend. This means I have to have the Node.JS backend update some form of database, then have the client download that data.
Some important information:
I don't have access to the client server, but of course I can access the backend.
I only need to transfer a very small amount of data (only 4 pieces of data).
I am doing this as a volunteer project, and therefore anything suggested needs to be free.
These are the options I have considered:
Option 1: Use Heroku Postgres
This is the option I initially wanted to use. However, I learnt that the credentials to access the database change every so often, so that means the final product may not be completely hands-free.
Option 2: Find an external SQL database host
This is the more likely option of the two. However, I've found that many free database host are insecure and difficult to use. I had a look at 000webhost, but I quickly learnt the database was hosted on localhost - this meant it couldn't be accessed by my client.
Which of these options, if any, are the best? What other methods can I use to accomplish this? Could someone please give me some recommendations on services which I could use?

Node.js / Express - how to think about client-side database work? (e.g. can't use require())

I've been through a number of Node.js, Express, and other tutorials/posts, and I'm struggling with how to think about connecting to a database on various pages throughout a webapp.
I would like to run a Node.js app (with a server.js file that connects to a database) and then query that database as needed on every page throughout the app.
So if I have an inventory.html page I should be able to have javascript that queries the inventory table and displays various inventory items throughout that html page.
Problem #1. I can't find a way to use mysql on any client-side pages, since javascript can't use node's require() function client-side. As detailed in this StackOverflow post ("require is not defined").
Problem #2. I can't figure out an elegant way to pass a database connection to other pages in my app. A page can send a POST request back to the server.js file, but this really isn't as flexible as I want.
I'm really looking for the modern, preferred way to do a bunch of PHP scripting in my Node app. Can anyone guide me to the right way to do this? Thank you!
You just can't directly call mysql from the client. Even if it worked imagine that anybody could modify the SQL queries and access all your data.
The only way how to do it is this:
js client app ------> js server app -------> mysql
You just must have 2 apps: one running in the user's browser sending requests to the server and the other running on the server answering the requests.

What is the best way to get data from an android app into a remote database? [duplicate]

This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Remote Database access
I'm developing an app for android which shoult connect itself to a remoe mysql-database.
So far I know what to do to get the app running visually...but how can I transfer the data into a remote database?
What kind of processes have to be developed to get the data into the right shape so that a websserver can translate that and put it into a database?
What do i have to do for getting:
the right structure of the data
transfer/translate/design an interface to bring data to a remote server (--> is it possible to use javascript only)?
What do i have to use? Ajax/JASON etc.
Anyone can help me out on this question of architecture?
You can create some RESTful web services to access the mysql database, then the Android app can call the web service to get or post data to the db, use XML or JSON as the format of data.
It depends on your remote database. If it is CouchDB for example, you just do simple HTTP requests.
If it is SQL you can use JDBC like other client applications would, too.
But perhaps you don't want to have database passwords on your clients. Then you will have to create a web application which is connected to your database. This web application then could provide your favorite (JSON over HTTP) protocol to your android clients.
Take a look at web APIs. Most common is WSDL/SOAP. In regards to the structure, I'd advise you to take a look at JSON. XML works as well, but is pretty redundant. There is also the possibility of using Remote Method Invocation with Java, but that's usually not really worth the effort, I think.

Categories