ReactJS manipulating objects data extracted from SQLITE3 Database - javascript

I am working on a full stack application. I want to query my database for information and for it to show in a different input box. I successfully query my database and retrieve the information, but I can't put the actual information into the input area.
From the console.log I found out it is an object, and I looked for tutorials, but they still don't help me. I can convert it to a string and put it there, but it won't help me, as I need the specific column - for example, { "title": "Back to the Future" } - this is similar to mine, and I only want to extract "Back to the Future".
I tried with "Object.title", JSON.parse and then trying to access its properties, but still nothing. I get undefined at best. Here is the code in question.
MainFile.jsx
import React, {Component} from 'react';
import './Control1.css';
import axios from "axios";
class editShowing extends React.Component{
constructor(props){
super(props);
this.state={
showingId: '',
title: '',
showingsList: [],
}
this.handleSubmit = this.handleSubmit.bind(this);
this.onChangeTitle = this.onChangeTitle.bind(this);
this.onChangeShowingID = this.onChangeShowingID.bind(this);
}
onChangeShowingID(event){
this.setState({showingId: event.target.value});
}
onChangeTitle(event){
this.setState({title: event.target.value});
}
handleSubmit(event){
event.preventDefault();
axios.get('/api/getShowings',
{
params: {
showingId: this.state.showingId
}
})
.then(response => {
const { showingsList } = response.data
this.setState({ showingsList });
console.log(showingsList.title)
})
}
render(){
const { showingsList } = this.state
return(
<div>
<form onSubmit={this.handleSubmit}>
<h1> A new title to test GitFlow </h1>
<input onChange = {this.onChangeShowingID} type = "text" name = "showingId" placeholder = 'hi' value = {this.showingId}></input>
<input onChange = {this.onChangeTitle} value = {showingsList} type = "text" name = "title" placeholder = "title" />
<button type = "submit">Submit</button>
</form>
</div>
)
}
}
export default editShowing;
Server.js bit
app.get('/api/getShowings', (req,res) => {
console.log("I communicate with server.js")
datalayer.getShowings(req.query.showingId,
(err, result) => {
res.send(result);
})
});
DataLayer.js bit
module.exports.getShowings = (showingId, callback) => {
console.log("I connect to datalayer")
let sql = `SELECT title FROM showings WHERE id = ?;`
console.log("SQL CONNECTS")
db.get(sql, [showingId], (err, res) => {
if (err){
throw err;
}
console.log(res)
return callback(null, res)
})
}
To summarise, I want to put the data (only the actual title, not the whole object) of "ShowingsList" into the "title input", and I have a lot of options, but to no avail. I have been learning React.JS for the past 2 weeks.

I am extra lucky and found a solution 5 minutes after posting it. In the datalayer, instead of res you need to put row.title or the actual information you need from the database. My other mistake was that in the main jsx file I initiated ShowingsList as an object, so I changed it to a normal string, and it now works.

Related

Programatically generating Gatsby pages without a slug from Graphql

I have set up an ACF options page in WordPress called Projects
Inside the Projects options page there is an ACF repeater allowing the user to add multiple Projects.
In Gatsby, I’m using Graphql to query the data for my Projects in two files:
Inside a custom hook, allowing access to the data globally in my Gatsby site
Inside a gatsby-node.js file in order to generate a slug for my template page called project-details.js
Obviously there is no slug in Graphql for this repeater field in the ACF options page. Instead, I’m generating a slug based on a nested Title text field that’s found inside each Project repeater field.
I’m using both the replaceAll() and toLowerCase() methods to create the slug and then making it available as part of my data.
Here's my custom hook:
export const useProjectsQueryAlt = () => {
const data = useStaticQuery(graphql`
query ProjectsQueryAlt {
wp {
projects {
projects {
allprojects {
projectContent
projectTitle
featuredImage {
mediaItemUrl
id
}
projectGallery {
caption
id
mediaItemUrl
}
}
}
}
}
}
`)
const project = data.wp.projects.projects.allprojects.map(node => {
const { projectContent, projectTitle, featuredImage, projectGallery } = node;
const title = node.projectTitle;
const spacesToHyphen = title.replaceAll(' ', '-');
const slugFromTitle = spacesToHyphen.toLowerCase()
return {
projectContent,
projectTitle,
slug: slugFromTitle,
featuredImage,
projectGallery: projectGallery.map(node => {
const { caption, id, mediaItemUrl } = node;
return {
caption,
id,
mediaItemUrl
}
})
}
})
return { project }
}
Here's my gatsby-node file:
const path = require('path')
exports.createPages = async ({ graphql, actions }) => {
const { data } = await graphql(`
query Projects {
wp {
projects {
projects {
allprojects {
projectTitle
}
}
}
}
}
`)
data.wp.projects.projects.allprojects.forEach(node => {
const title = node.projectTitle;
const spacesToHyphen = title.replaceAll(' ', '-');
const slugFromTitle = spacesToHyphen.toLowerCase()
actions.createPage({
path: '/projects/' + slugFromTitle,
component: path.resolve('./src/templates/project-details.js'),
context: { slug: slugFromTitle },
})
})
}
Here's my template file project-details.js
import React from 'react'
function ProjectDetails() {
return (
<div>
...my page template content
</div>
)
}
export default ProjectDetails
I now need to find a way to check that the two appended slugs match in my ‘project-details.js’ template file in order to display the relevant project data to the corresponding URL.
Seeing as I’ve generated my slugs on the front end, following the Gatsby Docs for setting up dynamically generate pages doesn’t align with my use case. I was hoping somebody has had experience with this use case and can point me in the right direction.
The problem in your approach is that you are generating a "fake" slug based on the title of the project so you can't use that field to filter any GraphQL node because the field is not present in the project fields. Your best option is using the title itself or using any autogenerated identifier (id, if it's present as a field).
actions.createPage({
path: '/projects/' + slugFromTitle,
component: path.resolve('./src/templates/project-details.js'),
context: { title },
})
Note: you can omit { title: title }
You can still use the path of your generated slug, this is a valid approach.
I'm assuming that if the title is a unique field, the slug must be too, hence you will be a valid filter.
Now in the project-details.js:
import React from 'react'
function ProjectDetails({ data }) {
console.log("my data is", data);
return (
<div>
...my page template content
</div>
)
}
export const query = graphql`
query($title: String!) {
yourACFNode(title: { eq: $title} ) {
# your fields
}
}
`
export default ProjectDetails
Of course, tweak the query above to match your ACF node but get the approach.

How to insert data into mysql using angular and nodejs - getting (NULL, NULL) upon insert - Problem solved

Good day,
I've been trying to learn a bit of angular and nodejs. I found a tutorial on a realtime chat app and made some few adjustment to some function of the code. But the one aspect that I cannot seem to get right is the ability for the user to post to a feed. The login process works, the user is already logged in but the user can't post. I would also like to be able to get all they data i insert from all the user to show up like a normal feedview will. Please assist.
Here are my files:
FROM MY CONTROLLER HERE IS THE CODE WHEN THE BUTTON IS PRESSED
$scope.postDatatoDd = () => {
appService.httpCall({
url: '/posts',
params: {
'posts': $scope.data.info,
'from_user_id': $scope.data.username
}
})
.then((response) => {
// $scope.$apply();
})
.catch((error) => {
alert(error.message);
});
}
and here is my route file:
this.app.post('/posts', async(request,response) => {
const reqResponse = {}
const data = {
posts : request.body.postDatatoDd,
from_user_id: request.body.username
};
if (data.posts === ''){
reqResponse.error = true;
reqResponse.message = `error, input`;
response.status(412).json(reqResponse);
} else {
const result = await helper.insertFeed(data);
if (result === null) {
reqResponse.error = true;
reqResponse.message = `they was an error.`;
response.status(417).json(reqResponse);
} else {
reqResponse.error = false;
reqResponse.userId = result.insertId;
reqResponse.message = `posted succesfully`;
response.status(200).json(reqResponse);
}
}});
and in my helper file there is this function to insert data:
async insertFeed(params){
try {
return await this.db.query(
`INSERT INTO posts (from_user_id,posts) values (?,?)`,
[params.from_user_id,params.postDatatoDd]
);
} catch (error) {
console.warn(error);
return null;
}
}
On the client side here is the button with :
<label for="postDatatoDd">Post</label>
<input type="text" id="postDatatoDd"
ng-model="data.postDatatoDd"
class="feed form-control"
placeholder="post your data here?"
/>
<button ng-click="postDatatoDd()" class="btn btn-primary">Post</button>
</div>
--- EDIT 1---
Data is being inserted now, but it is receiving the values as (NULL, NULL).
--- EDIT 2 ---
After closely looking at the code and fixing some naming variables the code works fine, the data is being inserted in mysql as it should.
Other than a lot of typos when it comes to the variables reference. The code seem to be fine.
Assuming that you using appservice class somewhere in your code and its functioned, then everything else will work.
You are getting the (NULL, NULL) because you are parsing parameters that are not being properly parsed out to your helper file, please close attention to that.
appService
.httpCall({
url: "/posts",
params: {
posts: $scope.data.postbuzz,
from_user_id: $scope.data.username,
},
})
.then((response) => {
$scope.$apply();
})
.catch((error) => {
alert(error.message);
});
make sure that the data that you calling from this above function is similar to $scope parameter you passing in your route file that your requesting:
const data = {
posts : request.body.posts,
from_user_id: request.body.from_user_id}
and in your database helper class you running:
`INSERT INTO posts (from_user_id,post) values (?,?)`,
[params.from_user_id,params.posts]
Hope this was helpful
You seem to have an understand already. your question may help a lot more people in the future.
params should be as following, since the data object has properties from_user_id and posts
`INSERT INTO posts (from_user_id,posts) values (?, ?)`,
[params.from_user_id,params.posts]
Might be useful https://www.w3schools.com/nodejs/nodejs_mysql_insert.asp
--- EDIT 2 ---
After closely looking at the code and fixing some naming variables the code works fine, the data is being inserted in mysql as it should.
If you are new to Angular you can use the code as reference.

react.js how to display multiple error messages

I just got started to react so please bear with me. I don't know exactly what I am doing, I'm just picking those things as I go so I'll do my best to walk you through my mental process when building this.
My intentions are to create a registration component, where the backend returns the validation errors in case there are any in form of an object which has following structure.
{
"username": [
"A user with that username already exists."
],
"email": [
"A user is already registered with this e-mail address."
]
}
The state manager that I chose to be using is redux, so this comes back every time when the register function is dispatched.
Since it has this structure I wrote a function to help me decompose it and pick up only on the actual errors (the strings).
const walkNestedObject = (obj, fn) => {
const values = Object.values(obj)
values.forEach(val =>
val && typeof val === "object" ? walkNestedObject(val, fn) : fn(val))
}
now I want to display them in the view, so I wrote another function which is supposed to do that
const writeError = (value) => {
return <Alert message={value} type="error" showIcon />
}
Down in the actual component I am calling it as this:
{(props.error) ? walkNestedObject(props.error, writeError) : null}
To my surprise if I console.log the value above return in writeError it works flawlessly, every single error gets printed, but none of them gets rendered.
To debug this I've tried multiple variations and none of them seemed to work, I even called the writeError function in the component as
{writeError('test')}
and it worked for some reason.
At this stage I'm just assuming there's some react knowledge required to fulfil this task that Im just now aware of.
EDIT:
A mock example can be found over here
Also, I've tried using the first two answers and when mapping through the errors I get this
Unhandled Rejection (TypeError): props.error.map is not a function
with other variations, it mentions the promise from so I'd include how I manage the API request
export const authSignup = (username, email, password1, password2) => dispatch => {
dispatch(authStart());
axios.post('http://127.0.0.1:8000/rest-auth/registration/', {
username: username,
email: email,
password1: password1,
password2: password2
})
.then(res => {
const token = res.data.key;
const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
localStorage.setItem('token', token);
localStorage.setItem('expirationDate', expirationDate);
dispatch(authSuccess(token));
dispatch(checkAuthTimeout(3600));
})
.catch(err => {
dispatch(authFail(err.response.data))
})
}
Consider changing the topology of your error messages:
"errors": [
{ "type": "username", "message": "Username already in use." },
{ "type": "email", "message": "Email address already in use."}
]
That makes your implementation a bit easier:
// MyLogin.jsx
import React from 'react'
const MyLogin = () => {
/**
* Here we're using state hooks, since it's much simpler than using Redux.
* Since we don't need this data to be made globally available in our
* application, it doesn't make sense to use Redux anyway.
*/
const [errors, setErrors] = React.useState([])
const handleLogin = (event) => {
event.preventDefault()
axios.post('/api/login', formData).then(() => successAction(), (error: any) => {
setErrors(error) // Update our local state with the server errors
})
}
return (
<>
{errors.length && ( // Conditionally render our errors
errors.map((error) => (
<Alert type={error.type} message={error.message} />
)
)}
<form onSubmit={handleLogin}>
<input type='text' name='email' />
<input type='text' name='username' />
<input type='password' name='password' />
</form>
<>
)
}
export default MyLogin
Your walkNestedFunction function checks each layer of an object, and if a given layer of the object is an object itself, it then uses that object to run your function - which in this case is writeError. writeError returns an error <Alert /> as soon as an error arises. But when you stick writeError inside the circular logic of walkNestedFunction, it will hit the first return statement, render it to the page, and then stop rendering. I think this is why you're getting the complete list of errors logged to the console. Your walkNestedFunction continues cycling down through object layers until its done. But in React, only the first return statement will actually render.
A better tactic would be to modify your writeError function to record the erors to a state variable. Then you can render this state variable. Every time the state is updated, the component will rerender with the updated state.
// Define state in your component to contain an array of errors:
state = {
errors: []
}
// Add an error into state with each iteration of writeError
const writeError = (error) => {
this.setState({
errors: [
...this.state.errors,
error
]
})
}
// inside render(), render the state variable containing your errors
<div>
{ this.state.errors.map(error => <p>error</p>) }
</div>
`

How to check if object exists in mLab using _id?

I am working on an angular application with a node.js backend where my architecture goes like this:
front-end => angular.service => node backend => mLab DB
Currently, I'm trying to push an object into the DB provided that it does not exist yet. If it already does, it should update. This function would be accessible via a button from the cards in my front-end.
to give a clearer understanding here's some of my code.
front-end: admin-edit-home.component.html
<a mdbBtn class='btn btn-md btn-primary' mdbWavesEffect (click)="addCard()">Add</a>
the code above is a button where I can add a card to the interface. The TS below shows how the code works.
front-end: admin-edit-home.component.ts
addCard() {
this.carousels.push(this.carousels.length);
}
To give an explanation of the TS code, 'carousels' is an array that I use to do an *ngFor loop in my HTML wherein it presents the data in a card format. It is declared as:
carousels: any = [];
So in pushing a length to the 'carousels' array, it present an empty card with no collected data but still possessing the HTML elements from the original card which contains the supposed update function that I would like to have.
My problem is, how do I do the checking of the object existence from the back-end and present the results back to the front-end? I have tried this,
back-end: api.js
router.route('/carousel/update/:id').put(function(req,res) {
var data = req.body;
const myquery = { _id: ObjectId(req.params.id) };
db.collection('home').updateOne(myquery, {
$set: {
"header" : data.header,
"subheader" : data.subheader,
"img" : data.img
}
})
if (myquery === -1) {
arr.push(obj);
} else {
arr[myquery] = obj
}
}
I know my back-end code is wrong and non-functional but I just wanted to let you guys have a visualisation of what my logic is trying to achieve.
Furthermore, this back-end code should now be accessible by my angular service through this chunk of code below:
home.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable ({
providedIn: 'root'
})
export class HomeService {
constructor(private http: HttpClient) {}
updateCard(id: string, header: string, subheader: string, img: string) {
var json = {id: id, header: header, subheader: subheader, img: img}
return this.http.put<any[]>(`./api/carousel/update/${id}`, json);
}
}
After trying these things, to sum up my problem in a more concise manner, I need to check from the database if the object is already existing via ObjectId and then update it through my input fields but if not, the updateCard() should create another object in my database. I hope to get help!
EDIT
router.route('/carousel/update/:id').put(function (req, res) {
var data = req.body;
const myquery = { "_id": ObjectId };
// console.log('header: ' + data.header + " id: " + data.id)
console.log(req.params)
db.collection("home").updateMany(myquery, {
$set: {
"img" : data.img,
"header" : data.header,
"subheader": data.subheader
}
}, (err, results) => {
res.status(200).json({status: "ok"})
})
})
This is the new api.js. Please refer.

How to get country code and Country name using IP in react js

I am working on an application which is based on react.js. One of the requirements in the app is to detect the location(Country) from where it is opened and then pre-fill the phone number field on a form with the flag of this country.
I am thinking that it would be done more efficiently by first detecting the IP address and then finding out the country name using this IP address. For that purpose, I have tried many libraries e.g. "iplocation", "geoip-country-lite", "ip" etc but these are not compatible with my application. Can any please suggest me other library using which I can get the country name?
Or there is any other effective solution instead of detecting the IP address e.g. getting some info from the browser which can get me the country name? Please guide.
You can do this without using jQuery.
Install & import axios from npm
import axios from 'axios'
Initialize your component state with country name & country code
constructor(props) {
super(props);
this.state = {
countryName: '',
countryCode: ''
}
}
Add this function to your component
getGeoInfo = () => {
axios.get('https://ipapi.co/json/').then((response) => {
let data = response.data;
this.setState({
countryName: data.country_name,
countryCode: data.country_calling_code
});
}).catch((error) => {
console.log(error);
});
};
And call this.getGeoInfo() to set country name & country code to your state. I called that from componentDidMount()
componentDidMount(){
this.getGeoInfo();
}
And you can read the state to get country name & country code
render() {
return (
<div>
<p>Country Name: {this.state.countryName}</p>
<p>Country Code: {this.state.countryCode}</p>
</div>
)
}
With React hooks, this can be done like below:
import React, { useEffect } from 'react';
useEffect(() => {
fetch('https://extreme-ip-lookup.com/json/')
.then( res => res.json())
.then(response => {
console.log("Country is : ", response);
})
.catch((data, status) => {
console.log('Request failed:', data);
});
},[])
You can use an external API to get location details from the client IP address.
I've redone this to use http://api.hostip.info, which is free to use, and I'm using Fetch rather than jQuery to pull the data.
function getElementText(response, elementName) {
return response.getElementsByTagName(elementName)[0].innerHTML;
}
function getIpAddress() {
fetch('http://api.hostip.info').then(response => {
return response.text();
}).then(xml => {
return (new window.DOMParser()).parseFromString(xml, "text/xml");
}).then(xmlDoc => {
countryName = getElementText(xmlDoc , "countryName");
countryCode = getElementText(xmlDoc , "countryAbbrev");
$("#output").html("Country name: " + countryName + "<br>" + "Country code: " + countryCode);
});
}
<div style="text-align:center;line-height:30px;">
<button onclick="getIpAddress()">Click me to get IP AddressInfo </button>
<div id="output">Location:</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Categories