I have 5 Accordions in localhost:3000/management page and each having dynamic values fetching API in backend node Js using Sequelize so how can I show the 5 accordions value in node js????
I want to know for 5 accordion how can I define backend code for one react URL in frontend???
On your backend your route should start a function that will return the correct value from your db using Sequelize. I don't know if you're using Express, Fastify etc and you didn't provide code so I won't be able to provide a more detailed explanation but feel free to update your post
On your React frontend you need to fetch from your backend. So that would be something like
const data = await fetch("https://yourapiadress...").json()
Once you have this you can easily use it in your accordion
data.map(content =>{
return <Accordion>{content}</Accordion>
})
Related
I have a express + react app weather app, I fetched the api from the openweatherapi in express app and connect it with react. now I want to change the query of the api search according to the search filed value from the react app.
Example:
https://openweatherapi/v.1.03?q={}
The api is in the server.js in express and I want to set the value of q to the search value of the client side.
All I want that to set the query of the server.js to input field value of the react app.
Assuming you can send data back to the server, consider using template literals.
Example: https://openweatherapi/v.1.03?q=${clientQuery}
I'm developing a web application for watching and managing data from my MongoDB. I'm using VueJS as the client side and NodeJS + Express + Mongoose in the server side (MEVN Stack).
I have tried to represent a table of my data in the client side, using the "vue-tables-2" (server-side) table and translate the http requests (Sort\Filter..) in the server to MongoDB query using "Querymen", but it seems the querymen fail to translate the Vue's http request.
The reason is that the Vue wrap the query's parameters with the "query" word:
http://localhost:3000/data?query%5BName%5D=Mor&query%5BLastName%5D=Vino&limit=10
While the querymen expect to receive:
http://localhost:3000/data?Name=Mor&LastName=Vino&limit=10
Did someone find a solution for that?
Or used different table component \ different translation library?
Versions: Vue js 2.5.16, Node js 8.11.1
Thanks
You can customize request by using requestAdapter in options
requestAdapter(data) {
// in here you can access data.query, split, concat or do anything you want
return {
Name: '' // put params here,
LastName: '',
limit: data.limit ? data.limit: 10
}
}
You can check official demo for reference
How does the react client connect to the server via express? Many tutorials talk about Superagent and axios which is adding to my confusion. Are there any resources on server side routing in the context of react? thank you
In MERN stack, you do not necessarily have to think of the entire stack as a single entity. Mongo, ReactJS and NodeJS server can all work independently. And let us for easiness of understanding sake say all of them are on separate servers. That is we can have Mongo on one server, ReactJS on another server and NodeJS with express on a third server, then also it will be a MERN stack app.
How a MERN app work is as follows
For example, let us have an app that displays the details of all the students in a class. First, in the React app let us say you select a class, and then the React front-end will send a query to the nodejs server. The query will contain the particular class name. Now nodejs will send a query to the mongo db asking for the details of the students of that class which it will send back to the node server. The node server will then send the details to the front end and it will update it.
If you ask for connection as such, there can be no connection at all except for querying for data. Instead of using the reactjs front end you can use some other frontend and it will give you the same details. React, Mongo and Node, all are capable of working on their own in their respective fields.
Axios is a promise based HTTP client for the browser and node.js.
They are completely independent. Whether using axios, the native Javascript fetch, jQuery AJAX, etc...each of them runs in the browser and makes a GET/POST request to nodejs. You will have defined corresponding GET/POST routes within nodejs to respond to these requests and return JSON response data for them to consume.
I would start by forgetting about react altogether. Instead build an express API with various GET/POST routes that return JSON responses. Test with a simple client like postman. Once you have a handle on that, then start with a front-end Javascript framework to consume these services.
Here is a cut of my express+react api:
var express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
res.render('index', {myjson: "myValue"});
})
module.exports = router;
Basically I am sending the json string to index.jsx, where the frontend is rendered.
Also I've set in express as:
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());
So the express server knows where React is.
Checkout the npm package Express-react-engine.
All the elements of the stack can be used independently, React , Node.Js, and MongoDB.
They can be installed in different servers and the communication is by using Fetch, Axios or any other tool.
I'm still learning Vue.js 2 so I do apologize if this question is a bit silly. I'm building an application using MongoDB, Node, Express and Vue. Normally I'd use a template engine such as Ejs where data passed through Express's res.render method can be readily captured in the template.
Is there a similar way to pass data from backend to the root Vue component? For example, normally, a get request fetches some data from Mongodb, express will render the template file and pass data to it.
app.get("/gallery/:id", function(res, req) {
var id = req.params.id;
database.findById(id, function(err, data) {
....
res.render("home", data);
}
});
Now my root Vue application is attached to html file. I'd like to be able to dynamically render the app with data returned from the database.
I've built an app before that streams data from an api and passed it to my Vue component via socket but I feel like using a socket in this case is unnecessary.
Use http. What's the problem? You can use XmlHttp, or a lot of folk seem to be using Axios. Trigger the call in the onload of your page, or use one of the vue lifecycle hooks. The very good vue docs don't have much to say about how and when to do this. We do it in the onload of the page, and we instantiate vue when the request for page data returns.
The question has already been answered, but I wanted to share my approach. I've been experimenting with rendering an object server side using res.render(), putting it in a div where display: none, and then grabbing the object on the client and passing it to Vue's data attribute.
How to Handle a Coinbase Callback in NodeJS to Recieve Instant Bit Coin Payment Notifications ?
Please I need example.
Note : I'm using SailsJS MVC Framework.
OK, based on your comment, I will give it a go.
I am assuming you have (or will have) an ExpressJs app.
UPDATE Sorry, I just noticed you're using sailsjs. The below should still be valid but you'll need to adapt it to work with the sails routing engine.
In your app, you need to define the post route:
// the app variable is the express js server
// name the route better than this...
app.post('/coinbase', function(req, res){
var data = req.body;
var orderId = data.order.id;
// etc...
});