I want to display the list of record into webpage . I am using vuejs for front end development and mysql for backend .I created this applications by using LoopBack. I have some list of records inside the mysql database but the problem is when i run the web page , its does not display the records and when i want to insert new records , i am getting errors on this line ..
**(index):96 PUT http://localhost:3000/api/Account/ 400 (Bad Request)
storeAccount # (index):96
submit # VM346:3
invokeWithErrorHandling # vue.js:1863
invoker # vue.js:2188
original._wrapper # vue.js:7541**
When i clicked the index.js ,its showing error in this line
fetch(API, {...
Here is code for server.js file.
// Copyright IBM Corp. 2016. All Rights Reserved.
// Node module: loopback-workspace
// This file is licensed under the MIT License.
// License text available at https://opensource.org/licenses/MIT
'use strict';
var loopback = require('loopback');
var boot = require('loopback-boot');
var app = module.exports = loopback();
app.start = function() {
// start the web server
return app.listen(function() {
app.emit('started');
var baseUrl = app.get('url').replace(/\/$/, '');
console.log('Web server listening at: %s', baseUrl);
if (app.get('loopback-component-explorer')) {
var explorerPath = app.get('loopback-component-explorer').mountPath;
console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
}
});
};
// Bootstrap the application, configure models, datasources and middleware.
// Sub-apps like REST API are mounted via boot scripts.
boot(app, __dirname, function(err) {
if (err) throw err;
// start the server if `$ node server.js`
if (require.main === module)
app.start();
});
Here is my html code .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="AccountApp">
<h1>Account List</h1>
<table>
<thead>
<tr>
<th>Id</th>
<th>Email Address</th>
<th>Created Date</th>
<th>Updated Date</th>
<td> </td>
</tr>
</thead>
<tbody>
<tr v-for="account in accounts">
<td #click="editAccount(account)" class="accountItem" title="Click to Edit">{{account.id}}</td>
<td>{{account.email}}</td>
<td>{{account.createdAt}}</td>
<td>{{account.lastModifiedAt}}</td>
<td #click="deleteAccount(account)" class="deleteAccount" title="Click to Delete">Delete</td>
</tr>
</tbody>
</table>
<form #submit.prevent="storeAccount">
<p>
<label for="email">Email</label>
<input type="text" id="email" v-model="account.email">
</p>
<p>
<label for="createdAt">Created At</label>
<input type="text" id="createdAt" v-model="account.createdAt">
</p>
<p>
<label for="lastModifiedAt">Last Modified At</label>
<input type="text" id="lastModifiedAt" v-model="account.lastModifiedAt">
</p>
<input type="reset" value="Clear" #click="reset">
<input type="submit" value="Save User 🐱">
</form>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script>
const API = 'http://localhost:3000/api/Account/';
let AccountApp = new Vue({
el: '#AccountApp',
data: {
accounts: [],
account: {
id: '',
email: '',
createdAt: '',
lastModifiedAt: ''
}
},
created: function () {
this.getAccounts();
},
methods: {
getAccounts: function () {
fetch(API)
.then(res => res.json())
.then(res => this.account = res);
},
storeAccount: function () {
let method;
console.log('storeAccount', this.account);
// Handle new vs old
if (this.account.id === '') {
delete this.account.id;
method = 'POST';
} else {
method = 'PUT';
}
fetch(API, {
headers: {
'Content-Type': 'application/json'
},
method: method,
body: JSON.stringify(this.account)
})
.then(res => res.json())
.then(res => {
this.getAccounts();
this.reset();
});
},
deleteAccount: function (c) {
fetch(API + c.id, {
headers: {
'Content-Type': 'application/json'
},
method: 'DELETE'
})
.then(res => res.json())
.then(res => {
this.getAccounts();
});
// call reset cuz the cat could be 'active'
this.reset();
},
editAccount: function (c) {
/*
This line was bad as it made a reference, and as you typed, it updated
the list. A user may think they don't need to click save.
this.cat = c;
*/
this.account.id = c.id;
this.account.email = c.email;
this.account.createdAt = c.createdAt;
this.account.lastModifiedAt = c.lastModifiedAt;
},
reset: function () {
this.account.id = '';
this.account.email = '';
this.account.createdAt = '';
this.account.lastModifiedAt = '';
}
}
});
</script>
Here is the screenshot when i run the applications .
Here is the screenshot on Networks tab ..
Related
I'm trying to find the best way to pass my html table data (React JSX) to the api2pdf REST API https://www.api2pdf.com/
I was unable to do so, which led me to reconstruct my whole html data separately then upload it
const fetchReportPdf = async () => {
await fetch("https://v2018.api2pdf.com/chrome/html", {
method: "post",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "*Auth key placed here*",
},
body: JSON.stringify({
html: `
<html style="color: green" lang="en">
<head>
<title>Daily Report for ${newDate}</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<div className="DailyReportTable_Container ">
<table
class="table table-bordered border-dark table-sm"
style="width: 900px"
>
<tbody>
<tr>
<th colspan="6" class="text-center">
CIVIL WORKS FOR CONSTRUCTION OF THWAKE DAM EMBARKMENT AND
ASSOCIATED WORKS
</th>
</tr>
<tr>
<th>INSPECTOR</th>
<td colspan="1">${report.User}</td>
<th>SECTION:</th>
<td colspan="4" style="padding-left: 10px">${
report.Section
}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
`,
fileName: `${newDate} ${report.Section} ${report.Shift}.pdf`,
options: {
textAlign: "left",
height: "11in",
},
}),
})
.then((res) => res.json())
.then((res) => {
document.getElementById(
"Download_Button"
).innerHTML = `<a className="Download_Button" href="${res.pdf}" >Download PDF</a>`;
});
};
This is the table, combined with fetched data from MongoDB which is stored in state then used in the html code above. Example is the ${report.User}
Placing this fetchReportPdf function in an onClick button generates a response with a download link which i can then access and save the pdf file
Using this method has been useful so far, but now i need to map data from an array in my state.
Mapping it directly inside the html code does not work. So i tried to place a script tag and execute the code from here
<script type="module">
${function rocktripFn() {
const rockTripArray = report.rocktrip;
const newArr = rockTripArray.map((item, index) => {
return `${item.Number_Of_Trips} trips made for Rock Type ${item.RockType}`;
});
const rocktrip = document.querySelector("#rockTripUL");
newArr.forEach((sub) => {
const item = document.createElement("li");
item.innerHTML = sub;
rocktrip.appendChild(item);
});
}}
rocktripFn();
</script>
report.rocktrip is the state holding the array that i want to map. But the pdf is blank in that section. The script only returns an output when i replace report.rocktrip with the actual array e.g.
{Number_Of_Trips: '45', RockType: '3A'},
{Number_Of_Trips: '32', RockType: '3B'}
But it can't map data directly from my state
I'm probably going about all this the wrong way when i'm certain there is a simpler way of doing this, how can i simplify this process with cleaner code?
Posting the jsx code directly from my component would definitely be ideal, but i don't know how.
Solution was to actually use useRef hook to obtain the innerHTML of the targeted div.
import useRef from "react";
const reportRef = useRef();
const fetchReportPdf = async () => {
const reportHTML = reportRef.current.innerHTML;
await fetch("https://v2018.api2pdf.com/chrome/html", {
method: "post",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Auth key placed here",
},
body: JSON.stringify({
html: `
<html style="color: green" lang="en">
<head>
<title>Daily Report for ${newDate}</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<div className="DailyReportTable_Container ">
${reportHTML}
</div>
</body>
</html>
`,
fileName: `${newDate} ${report.Section} ${report.Shift}.pdf`,
options: {
textAlign: "left",
height: "11in",
},
}),
})
.then((res) => res.json())
.then((res) => {
document.getElementById(
"Download_Button"
).innerHTML = `<a className="Download_Button" href="${res.pdf}" >Download PDF</a>`;
});
};
<table className="table-responsive" ref={reportRef}>
i am using vs code as ide.
this is the app code.
<template>
<div class="hello">
<!-- Select All records -->
<input type='button' #click='allRecords()' value='Select All users'>
<br><br>
<!-- Select record by ID -->
<input type='text' v-model='userid' placeholder="Enter Userid between 1 - 24">
<input type='button' #click='recordByID()' value='Select user by ID'>
<br><br>
<!-- List records -->
<table border='1' width='80%' style='border-collapse: collapse;'>
<tr>
<th>Username</th>
<th>Name</th>
<th>Email</th>
</tr>
<tr v-for='user in users'>
<td>{{ user.username }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'HelloWord',
data: {
users:"",
userid: 0
},
methods: {
allRecords: function () {
axios.get('api/ajaxfile.php')
.then(function (response) {
app.users = response.data;
})
.catch(function (error) {
console.log(error);
});
},
recordByID: function () {
if (this.userid > 0) {
axios.get('ajaxfile.php', {
params: {
userid: this.userid
}
})
.then(function (response) {
app.users = response.data;
})
.catch(function (error) {
console.log(error);
});
}
}
}
}
</script>
running the app code, chrome dev tools, like resposnse displays me the source code of the php file (which doesn't run).
The php file in another environment, using html including axios.js vue.js files as src (CDN) script works fine.
where am I wrong or how should I configure the vs code environment?
Because localhost:8080 runs no PHP server you must use a server which is running PHP, either on your local machine (e.g. MAMP) or on your public server. If the project resides under the folder my_project and the PHP file under the subfolder static, the proxyTable must look like:
proxyTable: {
'/static/dserver.php': {
target: 'http://localhost/my_project',
changeOrigin: true
}
which resolves in http://localhost/my_project/static/dserver.php .
Screenshot of UI
I'm having an issue invoking the inline javascript inside the mustache template file (.hjs).
when I click "Verify", the script tag and console logs do not run. It is not pulling the input code I type into the input box either.
For context: I am sending the mustache template (html) from my node server to an iFrame on the front end (React). I want the template to interact with the user and send an API call to my server and verify the 2FA.
I am sending variables to the javascript through {{ var }}, which is standard for mustache.
My thoughts: this code works in a regular index.html file.
any help or tips appreciated! I can try any suggestions locally to debug further.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div id="inline-widget" style="margin:0 auto;width: 360px;padding:5px">
<p style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;color:#48545d;font-size:14px;line-height:125%;margin:10px auto 20px;text-align:center">
Please complete your purchase by entering the 4 character code at the end of your recent charge description.
</p>
<img style="width: 350px;text-align:center;border:1px solid black" src="https://d2xxy1rwbjzckp.cloudfront.net/verification.jpeg" alt="Example"></img>
<p style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;color:#48545d;font-size:11px;line-height:125%;margin-bottom:10px auto 20px;text-align:left">
Code = 3122 in this example
</p>
<p id="error-message" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;color:#48545d;font-size:11px;line-height:125%;margin-bottom:10px auto 20px;text-align:center;color:red"></p>
<div class="input-group mb-3">
<input id="2faCode" type="text" class="form-control" placeholder="4 digit code" aria-describedby="basic-addon2"/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" id="verifyButton" type="button">Verify</button>
</div>
</div>
</div>
<script>
const button = document.getElementById('verifyButton');
button.addEventListener('click', async _ => {
try {
const verifyCode = document.getElementById('2faCode').value;
console.log('start!: ', verifyCode);
const response = await fetch({{ callbackUrl }}, {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
orderId: {{ orderId }},
verificationCode: {{ verifyCode }}
})
});
const contentType = response.headers.get("content-type");
if (contentType === 'text/html; charset=utf-8') {
const textResponse = await response.text();
document.getElementById("inline-widget").innerHTML = textResponse;
} else {
const parsedResponse = await response.json();
document.getElementById("error-message").innerHTML = parsedResponse.message;
}
} catch(err) {
document.getElementById("error-message").innerHTML = err;
console.error(`Error: ${err}`);
}
});
</script>
</body>
</html>
I am consuming wcf rest service into angular js application. I am trying to display single record based on user Last Name in Angular JS Application. I can get the details (JSON Format) of the user when i run wcf service on local host.
Here is the interface.
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetCustomers/{Account_Holder_Last_Name}")]
string GetCustomers(string Account_Holder_Last_Name);
Here is the Implementation .
public string GetCustomers(string Account_Holder_Last_Name)
{
List<object> customers = new List<object>();
string sql = "SELECT * FROM Current_Account_Holder_Details WHERE Account_Holder_Last_Name =#Account_Holder_Last_Name";
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Parameters.AddWithValue("#Account_Holder_Last_Name", Account_Holder_Last_Name);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new
{
Tittle = sdr["Tittle"],
Account_Holder_First_Name = sdr["Account_Holder_First_Name"],
Account_Holder_Last_Name = sdr["Account_Holder_Last_Name"],
Account_Holder_DOB = sdr["Account_Holder_DOB"],
Account_Holder_House_No = sdr["Account_Holder_House_No"],
Account_Holder_Street_Name = sdr["Account_Holder_Street_Name"],
Account_Holder_Post_Code = sdr["Account_Holder_Post_Code"],
Account_Holder_Occupation = sdr["Account_Holder_Occupation"],
Account_Number = sdr["Account_Number"]
});
}
}
conn.Close();
}
return (new JavaScriptSerializer().Serialize(customers));
}
}
Here is the screen shot when i access the method on user last name and its works fine .
But the problem is when i call this method from angular js application ,its unable to filed to find the record and not displaying anything.I did not found any error in Google Chrome Console window .
Here is the angular js code with HTML.
#{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.IsVisible = false;
$scope.Search = function () {
var post = $http({
method: "GET",
url: "http://localhost:52098/HalifaxIISService.svc/GetCustomers/{Account_Holder_Last_Name}",
dataType: 'json',
data: { Account_Holder_Last_Name: $scope.Account_Holder_Last_Name},
headers: {
'Accept': 'application/json, text/javascript, */*; q=0.01',
'Content-Type': 'application/json; charset=utf-8'
}
});
post.success(function (data, status) {
$scope.Customers = eval(data.d);
$scope.IsVisible = true;
});
post.error(function (data, status) {
$window.alert(data.Message);
});
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
Name:
<input type="text" ng-model="Account_Holder_Last_Name" />
<input type="button" value="Submit" ng-click="Search(Account_Holder_Last_Name)" />
<hr />
<table cellpadding="0" cellspacing="0" ng-show="IsVisible">
<tr style="height: 30px; background-color: skyblue; color: maroon;">
<th> Tittle</th>
<th>First Name</th>
<th> Last Name</th>
<th> DOB </th>
<th> House No</th>
<th> Street Name</th>
<th>Post Code</th>
<th> Occupation</th>
<th>Account Number</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.Tittle}}</td>
<td>{{m.Account_Holder_First_Name}}</td>
<td>{{m.Account_Holder_Last_Name}}</td>
<td>{{m.Account_Holder_DOB}}</td>
<td>{{m.Account_Holder_House_No}}</td>
<td>{{m.Account_Holder_Street_Name}}</td>
<td>{{m.Account_Holder_Post_Code}}</td>
<td>{{m.Account_Holder_Occupation}}</td>
<td>{{m.Account_Number}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here is the out put when i clicked the submit button .
ng-click="Search(Account_Holder_Last_Name)" - this looks wrong to me and chrome console proves it - you are basically sending the request with the parameter = 'Account_Holder_Last_Name'
I am attempting to add a search functionality with my database using Node & Handlebars to render. However when I search now it's giving me a 404 error, why is it not display search results? Here is my routing info
function searchPokemon(res, mysql, context, searchinput, complete){
var inserts = [req.body.searchinput];
var sql = 'SELECT pokemonname FROM pokemon WHERE pokemonname LIKE "%' + inserts + '%';
mysql.pool.query(sql, inserts, function(error, results, fields){
if(error){
res.write(JSON.stringify(error));
res.end();
}
context.search = results;
complete();
});
}
router.get('/search', function(req, res){
callbackCount = 0;
var context = {};
var mysql = req.app.get('mysql');
searchPokemon(res, mysql, context, req.body.searchinput, complete);
function complete(){
callbackCount++;
if(callbackCount >= 1) {
res.render('search-pokemon', context);
}
}
});
Here is my current page that I am rendering the search functionality on (pokemon.handlebars)
<h1>Current Pokemon Moves -</h1>
<table id="table">
<thead>
<th>Pokemon Name </th>
<th>Evolution Level </th>
<th>Move Name </th>
<th>Strength</th>
</thead>
<input type="text" class="search form-control" name="searchinput" placeholder="Pokemon Name">
<input type="button" class="btn btn-primary" value="Search" onclick="getUsers({{searchinput}})">
<br>
And here is my script to search
function getUsers(searchinput){
$.ajax({
url: '/search-pokemon',
type: 'GET',
success: function(result){
window.location.reload(true);
}
})
};
I had the same issue with the search function and I used typeahead.js.
Instead of 'post' I have used 'get'
router.post('/search', function(..)..
I'll put my code here, so u can get an idea.
app.js
// return homepage
app.get('/',function(req,res){
res.render('index');
});
// search function
app.post('/search',function(req,res){
var str = {
stringPart:req.body.typeahead
}
db.query('SELECT songTitle FROM song WHERE songTitle LIKE "%'+str.stringPart+'%"',function(err, rows, fields) {
if (err) throw err;
var data=[];
for(i=0;i<rows.length;i++)
{
data.push(rows[i].songTitle);
}
res.send(JSON.stringify(data));
});
});
index.ejs
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../JS/jquery.typeahead.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote: 'http://localhost:3000/search?key=%QUERY',
limit: 10
});
});
</script>
<form method="POST" action="/search">
<label>Search Data</label>
<input class="typeahead tt-query" spellcheck="false" autocomplete="off" name="typeahead" type="text" />
</form>