I want to display my object values in HTML tags but nothing comes up. The object appears successfully in the console. When I simply place res only [object object] displays on the page and res.json and res.text display nothing. Please see code below.
Shopping-Cart-Child.component.html
<form #form="ngForm" autocomplete="off">
<div class="form-group">
<div class="input-group">
<div class="input-groupprepend">
<div class="input-group-text bg-white">
<i class="fas fa-user-tie"></i>
</div>
</div>
<input placeholder="Person Number" type="text" [(ngModel)]=personNo name="personNo">
</div>
</div>
<br>
<div class="form-group">
<button class="btn btn-success btn-lg btn-block" (click)=SearchCustomer()>Get shopping cart</button>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-7">
<p>{{results}}</p>
</div>
</div>
</div>
</form>
Shopping-cart-child.Component.ts
import { Component, OnInit } from '#angular/core';
import {HttpClient,HttpResponse} from '#angular/common/http';
#Component({
selector: 'app-shopping-cart-child',
templateUrl: './shopping-cart-child.component.html',
styles: [
]
})
export class ShoppingCartChildComponent implements OnInit {
personNo=''
results:any;
constructor(private http:HttpClient) { }
SearchCustomer(){
return this.http.get("http://lab.tekchoice.co.za/api/v1/CCWeb/GetShoppingCart?accountNo="+this.personNo)
.subscribe((res:Response)=>{
console.log(res);
this.results = res.json;
}
)
}
ngOnInit(): void {
}
}
Use the json pipe.
E.g.
<p>{{results | json}}</p>
Related
I'm using VUE Vite and Webpack to compile the files. My problem is the following:
If i set my background image for the body tag in css then I can see the background in the develper verson in the browser. After creating the webpack files it won't use the background.
It seems like it doesnt compile the background. Does anyone know why this issue happens?
I appreciate any kind of help and suggestions.
My Folder structure is the following:
Code:
<template>
<div class="d-flex align-items-center justify-content-center vh-100">
<form>
<div class="mb-3">
<input type="email" class="form-control input-style-1" placeholder="Email eingeben" v-model="email">
</div>
<div class="mb-3">
<input type="password" class="form-control input-style-1" placeholder="Passwort eingeben" v-model="password">
</div>
<div class="d-grid">
<button class="btn btn-primary button-style-1" type="button" #click="login">Einloggen</button>
</div>
<div class="d-grid">
<router-link class="text-white mt-3" to="/register">Neuen Account erstellen</router-link>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'Login',
data: function() {
return {
email: '',
password: ''
}
},
methods: {
async login(){
if(this.email == "" || this.password == "") return;
await window.rpc.callServer("sLoginUser", [this.email, this.password]);
}
}
}
</script>
<style>
body {
background: url("./images/background.jpg") !important;
}
</style>
Not sure what other info I could supply besides one of the columns that would be helpful. I'm stumped.
[edit] Added full code for this component. This looks fine on desktop but not on my phone or tablet. See the photos. I'm repeating this because I can't save my edits to this question due to having too much code and not enough information so here I am rambling about nothing.
Mobile:
Desktop:
import React, { Component } from 'react';
import API from '../utils/API';
class Attendance extends Component {
state = {
selectedOption: "",
disabled: ""
};
handleOptionChange = (changeEvent) => {
this.setState({
selectedOption: changeEvent.target.value
});
};
handleFormSubmit = (formSubmitEvent) => {
formSubmitEvent.preventDefault();
if (!this.state.selectedOption) {
return;
} else {
this.setState({
disabled: "true"
})
API.updateAttendance(this.props.student._id, { present: this.state.selectedOption });
}
};
render() {
return (
<div className="col d-flex justify-content-end" >
<form onSubmit={this.handleFormSubmit}>
<div className="row mt-3">
<div className="col-sm-3">
<label className="text-danger">
<input
type="checkbox"
value="absent"
checked={this.state.selectedOption === 'absent'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Absent
</label>
</div>
<div className="col-sm-3">
<label className="text-warning">
<input
type="checkbox"
value="excused"
checked={this.state.selectedOption === 'excused'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Excused
</label>
</div>
<div className="col-sm-3">
<label className="text-success">
<input
type="checkbox"
value="present"
checked={this.state.selectedOption === 'present'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Present
</label>
</div>
<div className="col-sm-3">
<div className="form-group">
<button type="submit" className="btn btn-sm btn-dark" onSubmit={this.handleFormSubmit} disabled={this.state.disabled}>
<i className="fas fa-user-check" />
</button>
</div>
</div>
</div>
</form>
</div>
);
}
}
export default Attendance;
I'm coding a Employee Database in Vuejs using Firebase as my backend. On my new employee page I keep getting a 3 errors when submitting the form to add a new employee.
"Property or method "saveEmployee" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property."
"[Vue warn]: Error in v-on handler: "TypeError: _vm.saveEmployee is not a function"
"TypeError: "_vm.saveEmployee is not a function"
This is how my newemployee.vue file looks like
<template>
<div id="new-employee">
<h3>New Employee</h3>
<div class="row">
<form #submit.prevent="saveEmployee" class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="employee_id" required />
<label>Employee ID#</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="name" required />
<label>Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="dept" required />
<label>Department</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="position" required />
<label>Name</label>
</div>
</div>
<button type="submit" class="btn">Submit</button>
<router-link to="/" class="btn grey">Cancel</router-link>
</form>
</div>
</div>
</template>
<script>
import db from "./firebaseInit";
export default {
name: "new-employee",
data() {
return {
employee_id: null,
name: null,
dept: null,
position: null
};
},
methods: {
saveEmployee() {
db.collection("employees")
.add({
employee_id: this.employee_id,
name: this.name,
dept: this.dept,
position: this.position
})
.then(docRef => {
console.log("Client added: ", docRef.id);
this.$router.push("/");
})
.catch(error => {
console.error("Error adding employee: ", error);
});
}
}
};
</script>
The whole problem is on the saveEmployee function and I can not find a fix.
I am trying to successfully express Semantic-UI code with the same functions I have used in Semantic-UI-react code. Any help would be appreciated.
This is what I have:
class Preview extends React.Component {
componentDidMount() {
const update = () => {
this.dest.textContent = this.src.innerHTML.replace(/</g,
'\n<');
};
setInterval(update, 300);
update();
}
render() {
return (
<div>
<div ref={(src) => Object.assign(this, { src })}>
<Demo />
</div>
<pre ref={(dest) => Object.assign(this, { dest })}>
</pre>
</div>
)
}
}
export class Demo extends Component { constructor(){
super();
this.localStorageClear.bind(this); }
localStorageClear = (e) => {
e.preventDefault();
window.localStorage.clear();
};
render() {
return (
<div id = "soundcloud-player">
<Container className='col'>
<div className='col-left js-playlist toggle'>
<div className='inner'>
</div>
</div>
<div className='col-right'>
<div className = 'main'>
<Input size='massive' icon='search' input = {{ className:
'input-search js-search' }} placeholder='Search for a song
or artist...'/>
<Icon className='js-submit'/>
<Button onClick={(e) => this.localStorageClear(e)}
className='clear' content='Clear Playlist'/>
<Button content='Show/Hide Playlist' id='toggle'
className='hide-toggle'/>
<Card className='js-search-results search-results'/>
</div>
</div>
</Container>
</div>
The code written in the Preview Component is specifically written to convert the code written inside of the Demo Component. The Demo Component should convert to what is shown below:
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input">
<input placeholder="Search for a song or artist..." class="js-search input-search">
<i class="search icon js-submit"></i>
</div>
<button onclick="localStorageClear();" class="clear">Clear Playlist</button>
<button class="hide-toggle" href="#" id="toggle">Show/Hide Playlist</button>
<div class="search-results js-search-results ui cards">
</div>
</div>
</div>
The actual output of the code at the top is:
<div id="soundcloud-player">
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input input-search">
<input placeholder="Search for a song or artist..." type="text">
<i aria-hidden="true" class="search icon">
</i>
</div>
<i aria-hidden="true" class="icon js-submit">
</i>
<button class="ui button clear" role="button">Clear Playlist
</button>
<button id="toggle" class="ui button hide-toggle" role="button">Show/Hide Playlist
</button>
<div class="ui card js-search-results search-results">
</div>
</div>
</div>
</div>
</div>
I'm trying to figure out why the localStorageClear function does not show up for the first button in the actual output. Is there wrong I am doing at the top inside of the Semantic-UI-React code inside of the Demo Component?
The way you are setting up your handler function is not correct. You are also binding in your constructor AND inline with an arrow function inside of the onClick event for the button. You only need to bind in one place.
Take a look at the codesandbox example I made so you can see how to declare a class method handler function and use it with a click event. Notice that there is no constructor here or arrow function to bind on the onClick event? That is because the binding is happening on the class method. handleClick = () => {}
class App extends React.Component {
handleClick = e => {
console.log(e.target + " was clicked.");
// Do whatever functionality you need here.
// In your example you do not show that it matters what the element is,
// so you don't need to pass the event (e) into your class method.
};
render() {
return (
<Container>
<Divider hidden />
<Button content="Click Me" onClick={this.handleClick} />
<Divider hidden clearing />
<Message info>
Look in your console and you will see that the click function is
working.
</Message>
</Container>
);
}
}
Here is a working codesandbox example.
I wrote some code in TypeScript for Angular 2. When I click on submit button, the data is appending to the database but the values that appears in the database is wrong
At one click, my database has 4 rows inserted with 1 row valid data and other 3 with null values.
This is my component:
import {Component} from '#angular/core';
import {Http, Response, Headers} from '#angular/http';
import {Observable} from 'rxjs/Observable';
import {Subject } from 'rxjs/Subject';
#Component({
templateUrl: './components/profile/profile.html'
})
export class Profile {
http: Http;
constructor(http: Http) {
this.http = http;
}
postResponse = new Person();
onSubmit(form){
//this.form = form;
console.log(form);
var headers = new Headers();
// headers.append('Content-Type', 'application/json');
headers.append('Content-Type','application/x-www-form-urlencoded')
this.http.post('http://localhost/fin/index.php/profile/addprofile', JSON.stringify(form),{headers:headers})
.map((res: Response) => res.json())
.subscribe((res:Person) => this.postResponse = res);
}
}
class Person {
firstName:string;
lastName:string;
}
My template
<h3 class= "head">MY PROFILE</h3>
<form (ngSubmit)="onSubmit(myForm.value)" #myForm="ngForm" >
<div class="form-row">
<div class="col-lg-6" >
<div class="formHeading get">First Name</div>
<input type="text" id="firstName" class = "col-sm-7" ngControl="firstname">
</div>
<div class="form-row">
<div class="col-lg-6" >
<div class="formHeading get" >Last Name</div>
<input type="text" id="firstName" class = "col-sm-7" ngControl="lastname">
<div class="form-row">
<div class="col-lg-6" >
<div class="formHeading get">Email</div>
<input type="text" id="zip" class = "col-sm-7" ngControl="email">
<div class="form-row">
<div class="col-lg-6" >
<div class="formHeading get">Profile Name</div>
<input type="text" id="profileName" class = " col-sm-7" ngControl="profilename">
<div class="form-row">
<div class="col-lg-6" >
<div class="formHeading get">Contact Number</div>
<input type="text" id="firstName" class = " col-sm-7" ngControl="phone">
Save
I am not sure where the error is about and sometimes I see the correct data in the database and sometimes not. Can anyone find the error?