Error: Image is not display in CactusList Page

Error: Image is not display in CactusList Page - javascript

I am currently developing a ecommerce project using Laravel and react.js. I want to show the available cactus list in my admin panel. So, I created the table and add data to the table using laravel and react.js. The image is automatically saved to "cactus_Type" folder in the project folder. I want to show all the available cactus types that I have added to Database. So, I have created a table to show the available cactus. Only ID, Name is display on the table, the image is not display.
CactusController I use:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Cactus;
class CactusController extends Controller
{
//
function addCactus(Request $req)
{
$cactus=new Cactus;
$cactus->name=$req->input('name');
$cactus->file_path=$req->file('file')->store('cactus_Type');
$cactus->save();
return $cactus;
}
function Cactuslist()
{
return Cactus :: all();
}
function Cactusdelete($id)
{
$result= Cactus ::where('id',$id)->delete();
if($result)
{
return["result"=>"Cactus has been deleted"];
}
else
{
return["result"=>"Operation Failed"];
}
return $result;
}
}
Migration Cacti Table
public function up()
{
Schema::create('cacti', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('file_path');
$table->timestamps();
});
}
CactusList.js in react.js
import Cactus from './Cactus';
import React ,{useState,useEffect} from 'react';
import {Table} from 'react-bootstrap'
import {Link} from 'react-router-dom'
function CactusList()
{
//Define state
const [data,setData]=useState([]);
useEffect(()=>{
getData();
},[])
async function deleteOperation(id)
{
let result= await fetch("http://localhost:8000/api/Cactusdelete/"+id, {
method:'DELETE'
});
result=await result.json();
console.warn(result)
getData();
}
async function getData()
{
let result= await fetch("http://localhost:8000/api/Cactuslist");
result= await result.json();
setData(result)
}
return(
<div>
<Cactus/>
<div className="col-sm-8 offset-sm-2">
<h1>Available Cactus List</h1>
<Table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Image</td>
<td>Operations</td>
</tr>
{
data.map((item)=>
<tr>
<td>{item.id}</td>
<td>{item.name}</td>
<td><img style={{width:100}} src ={"http://localhost:8000/"+item.file_path}/></td>
<td><span onClick={()=>deleteOperation(item.id)} className="delete">Delete</span></td>
<td>
<Link to={"updateCactus/"+item.id}>
<span className="update">Update</span>
</Link>
</td>
</tr>
)
}
</Table>
</div>
</div>
)
}
export default CactusList
I am getting this error in console
GET http://localhost:8000/cactus_Type/BEOPiwLF3EU9k2ggn8abKxAXgDVDpS38Up7UZ2OZ.jpg 404 (Not Found)
This is how the outcome show,
Available Cactus List Page
Thank you in advance for your help!

Related

[Vue warn]: Property or method "list" is not defined on the instance but referenced during render. Make sure that this property is reactive [...]

I'm browsing characters of the Rick & Morty series app, using vue.js and I'm new to vue.js.
but I'm getting below mentioned error, please help me solve this
Error1 : [Vue warn]: Property or method "list" 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.
// App.vue file //
<template>
<div id="app">
<Nav />
<CharactersList />
</div>
</template>
<script>
import Nav from './components/Nav.vue'
import CharactersList from './components/CharactersList'
export default {
name: 'App',
components: {
Nav,
CharactersList
}
}
</script>
// CharactersList.vue file //
<template>
<div>
<h1>Rick and Morty characters</h1>
<table border="1px">
<tr>
<td>Character ID</td>
<td>Name</td>
<td>Species</td>
<td>Add to fav</td>
</tr>
<tr v-for="item in list" v-bind:key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}}}</td>
<td>{{item.species}}</td>
<button>Add to fav</button>
</tr>
</table>
</div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
export default {
name: 'CharactersList',
data: function () {
return {
list: undefined
}
},
mounted () {
Vue.axios.get('https://rickandmortyapi.com/api/character/')
.then((resp) => {
debugger
this.list = resp.data.results
})
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

First of all, you don't need to import there Vue and VueAxios, as they are no use there. And second, you need to modify your list variable value from undefined to []
I have changed your CharactersList component code, you can copy and paste all codes, and it will work as the way you want:
CharactersList.vue
<template>
<div>
<h1>Rick and Morty characters</h1>
<table border="1px">
<tr>
<td>Character ID</td>
<td>Name</td>
<td>Species</td>
<td>Add to fav</td>
</tr>
<tr v-for="item in list" v-bind:key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.species}}</td>
<button>Add to fav</button>
</tr>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'CharactersList',
data: function () {
return {
list: []
}
},
mounted () {
axios.get('https://rickandmortyapi.com/api/character/')
.then((resp) => {
this.list = resp.data.results
})
}
}
</script>

Can't we pass obj data as prop to different components in svelte

So I want to pass data(object) as prop to different component. My goal to make the table component reusable.
App.svelte
<script>
import {onMount} from 'svelte';
import Tabel from './components/Tabel.svelte';
let data = [];
onMount(async () => {
try {
let res = await fetch(url); // your url
data = await res.json();
} catch(err){
throw err;
}
})
</script>
<Tabel {data} />
Table.svelte
<script>
export let data = [];
</script>
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Age</th>
<!-- and so on -->
</tr>
</thead>
<tbody>
{#each data as {name, age}, i}
<tr>
<th class="px-4 py-2">{name}</th>
<th class="px-4 py-2">{age}</th>
<!-- and so on -->
</tr>
{/each}
</tbody>
</table>
But I've got an error like this:
rollup v2.16.1
bundles src/main.js → public/build/bundle.js...
[!] Error: Could not resolve './components/Tabel.svelte' from src/App.svelte
Error: Could not resolve './components/Tabel.svelte' from src/App.svelte

You have a typo. Import Table by its proper name:
<script>
import Table from './components/Table.svelte'; // <- fix this
//...
</script>
<Table {data}/>

Transform a SPFX TS without JS framework to a React TS

I used yo #microsoft/sharepoint to created a webpart to display a list of items.
The solution was created without Javascript framework.
import { Version } from '#microsoft/sp-core-library';
import { BaseClientSideWebPart } from '#microsoft/sp-webpart-base';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '#microsoft/sp-property-pane';
import { escape } from '#microsoft/sp-lodash-subset';
import styles from './GetSpListItemsWebPart.module.scss';
import * as strings from 'GetSpListItemsWebPartStrings';
import {
SPHttpClient,
SPHttpClientResponse
} from '#microsoft/sp-http';
import {
Environment,
EnvironmentType
} from '#microsoft/sp-core-library';
export interface IGetSpListItemsWebPartProps {
description: string;
}
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
ID:string;
Title: string;
Summary : string;
NewsCategory: string;
Created:string;
AttachmentFiles:{
Name:string;
Url:string;
ServerRelativeUrl: string;
}
}
export default class GetSpListItemsWebPart extends BaseClientSideWebPart<IGetSpListItemsWebPartProps> {
private _getListData(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/lists/GetByTitle('News')/items?$select=*&$expand=AttachmentFiles",SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _renderListAsync(): void {
if (Environment.type == EnvironmentType.SharePoint ||
Environment.type == EnvironmentType.ClassicSharePoint) {
this._getListData()
.then((response) => {
this._renderList(response.value);
});
}
}
public titleurl(query:string){
var path="/Lists/News/DispForm.aspx?ID=";
var currdir=this.context.pageContext.web.absoluteUrl;
var result=currdir+path+query;
return result;
}
private _renderList(items: ISPList[]): void {
let html: string = '<table border=1 width=100% style="border-collapse: collapse;">';
html += '<th>ID</th><th>Title</th> <th>Summary</th><th>Created</th><th>Attachments</th>';
items.forEach((item: ISPList) => {
html += `
<tr>
<td>${item.ID}</td>
<td>${item.Title}</td>
<td>${item.Title}</td>
<td>${item.Created}</td>
<td>
<img src="${item.AttachmentFiles[0].ServerRelativeUrl}" width="300px" height="300px" />
</td>
</tr>
`;
});
html += '</table>';
const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;
}
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.getSpListItems }">
<div class="${ styles.container }">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${ styles.row }">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint Modern Developmennt</span>
<p class="ms-font-l ms-fontColor-white">Loading from ${this.context.pageContext.web.title}</p>
<p class="ms-font-l ms-fontColor-white">Retrive Data from SharePoint List</p>
</div>
</div>
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div>NEWS List Items</div>
<br>
<div id="spListContainer" />
</div>
</div>`;
this._renderListAsync();
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
This part was rendered successfully.
I then created a solution yo #microsoft/sharepoint
using the React option.
I am stuck on how to render the HTML documents.
Previous it as used to this.domElement, but it says It is not in the class.
I attempted to creating another class to render seems unsuccessful.
How to print the results?
import * as React from 'react';
import styles from './B.module.scss';
import { IBProps } from './IBProps';
import { escape } from '#microsoft/sp-lodash-subset';
import {
SPHttpClient,
SPHttpClientResponse
} from '#microsoft/sp-http';
import {
Environment,
EnvironmentType
} from '#microsoft/sp-core-library';
import * as ReactDOM from 'react-dom';
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
ID:string;
Title: string;
Summary : string;
NewsCategory: string;
Created:string;
AttachmentFiles:{
Name:string;
Url:string;
ServerRelativeUrl: string;
}
}
export default class B extends React.Component<IBProps, {}> {
public render(): React.ReactElement<IBProps> {
return (
<div className={ styles.b }>
<div id="spListContainer"></div>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
</div>
</div>
</div>
</div>
);
}
}
export class shownews extends B{
constructor(prop){
super(prop);
public _getListData(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/lists/GetByTitle('News')/items?$select=*&$expand=AttachmentFiles",SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
public _renderListAsync(): void {
if (Environment.type == EnvironmentType.SharePoint ||
Environment.type == EnvironmentType.ClassicSharePoint) {
this._getListData()
.then((response) => {
this._renderList(response.value);
});
}
}
public titleurl(query:string){
var path="/Lists/News/DispForm.aspx?ID=";
var currdir=this.context.pageContext.web.absoluteUrl;
var result=currdir+path+query;
return result;
}
private _renderList(items: ISPList[]): void {
let html: string = '<table border=1 width=100% style="border-collapse: collapse;">';
html += '<th>ID</th><th>Title</th> <th>Summary</th><th>Created</th><th>Attachments</th>';
items.forEach((item: ISPList) => {
html += `
<tr>
<td>${item.ID}</td>
<td>${item.Title}</td>
<td>${item.Title}</td>
<td>${item.Created}</td>
<td>
<img src="${item.AttachmentFiles[0].ServerRelativeUrl}" width="300px" height="300px" />
</td>
</tr>
`;
});
html += '</table>';
const listContainer = React.createElement('h1',{},html);
ReactDOM.render(listContainer, document.getElementById('spListContainer'));
this._renderListAsync();
}
}
}
I do apologize If there are many tutorials on SPFX, REACT JS on CRUD operations.
However, I clone it, attempted to npm install or npm i -g, none of the repositories work for me.
2020-01-28
Rewrote the code to get json directly. The html tags won't render
import * as React from 'react';
import styles from './A.module.scss';
import { IAProps } from './IAProps';
import { escape } from '#microsoft/sp-lodash-subset';
import { PageContext } from "#microsoft/sp-page-context";
import { HttpClient, IHttpClientOptions, HttpClientResponse, SPHttpClient, ISPHttpClientOptions, SPHttpClientResponse } from '#microsoft/sp-http';
import {
Environment,
EnvironmentType
} from '#microsoft/sp-core-library';
export interface ISPLists {
value: ISPList[];
};
export interface ISPList {
ID:string;
Title: string;
Summary : string;
NewsCategory: string;
Created:string;
AttachmentFiles:{
Name:string;
Url:string;
ServerRelativeUrl: string;
};
}
export default class A extends React.Component<IAProps, {}> {
public test:any=[];
public data:any=[];
public geturl(query:string){
var path="/Lists/News/DispForm.aspx?ID=";
var currdir=this.props.pagecontext.web.absoluteUrl;
var result=currdir+path+query;
return result;
}
private getListData(){
const opt: ISPHttpClientOptions = { headers: { 'Content-Type': 'application/json;odata=verbose' } };
return this.props.SPHttpClient.get(this.props.pagecontext.web.absoluteUrl + "/_api/lists/GetByTitle('News')/items?$select=*&$expand=AttachmentFiles",SPHttpClient.configurations.v1,opt)
.then((response: SPHttpClientResponse) => {
response.json().then((json: any) => {
for(let i=0;i<json.value.length;i++){
this.data.push(<div><tr>
<td>${json.ID}</td>
<td>${json.Title}</td>
<td></td>
<td>${json.Created}</td>
<td><img src="${json.AttachmentFiles.ServerRelativeUrl}" width="300px" height="300px" /></td>
</tr></div>);
}
});
});
}
/*
private renderList(item: ISPList[]): void {
item.forEach((item: ISPList) => {
this.data.push(`<tr>
<td>${item.ID}</td>
<td>${item.Title}</td>
<td></td>
<td>${item.Created}</td>
<td><img src="${item.AttachmentFiles.ServerRelativeUrl}" width="300px" height="300px" /></td>
</tr>`
);
})
console.log(this.data);
};
*/
/*
private push() {
this.test.push(1);
this.test.push(2);
this.test.push(3);
console.log(this.test);
}
*/
public render(): React.ReactElement<IAProps>{
this.getListData();
console.log(this.data);
return (
<div id="splist">
TEST
<table className={styles.container}>
<tr>
<th>ID</th><th>Title</th> <th>Summary</th><th>Created</th><th>Attachments</th>
</tr>
<tr>
<td></td>
<td>TITLE</td>
<td></td>
<td>Created</td>
<td>
</td>
</tr>
{this.data}
1234
</table>
</div>
);
}
}
2020-01-28 18:15
This Don't Work this.
If I .push (data);
The Table would have ); all over the place.
this.setState({ items:"<td>{item.ID}</td>
<td>{item.Title}</td>
<td>{item.Summary}</td>
<td>{item.Created}</td>
<td>{item.AttachmentFiles[0].ServerRelativeUrl}</td>" });
This do not work
this.Title.push(<span><td>{item.Title}</td></span>);
this.Url.push(<span><td>{item.AttachmentFiles[0].ServerRelativeUrl}</td></span>);
This Works
this.ID.push(item.ID); /* this.Title.push(<span><td>{item.Title}</td></span>); this.Url.push(<span><td>{item.AttachmentFiles[0].ServerRelativeUrl}</td></span>); */ this.forceUpdate();
If I use an array and use .push to send data including HTML tags
the follow screenshot shows the problem.
The Code
public renderList(item: ISPList[]): void {
item.forEach((item: ISPList) => {
this.data.push(<tr>);
this.data.push(<td>{item.ID}</td>);
this.data.push(<td>{item.Title}</td>);
this.data.push(<td>{item.AttachmentFiles[0].ServerRelativeUrl}</td>);
this.data.push(</tr>);
//some brackets...
2020-01-28 1956 Problem TR WITHIN TR
Problem: If I write the HTML tags and data in one line the tags will generate it self. But in the render method, I need to add a tag to wrap it will make my output incorrect format.
//some codes before to get the JSON data
this.data.push(<tr>
<td>{item.ID}</td>
<td>{item.Title}</td>
<td>{item.AttachmentFiles[0].ServerRelativeUrl}</td></tr>);
//some more codes
public render(): React.ReactElement<IAProps>{
return (
<div id="splist">
TEST
<table className={styles.container}>
<tr>
<th>ID</th>
<th>Title</th>
<th>Attachments</th>
</tr>
{this.data}
</table>
</div>
);
}

Firstly, you need to think about your solution in terms of components (having props or states) that you want to render. In context of your solution you can create a component lets say: 'GetandRenderListItems.tsx' and do all ' _getListData()' stuff. You can use 'componentDidMount()' life cycle hook to call _getListData() function everytime after the component is mounted. Then you need to write html template to render retrieved data (all what you have done in '_renderList()' method) have a look at below snippet to get an idea:
public render(): React.ReactElement<IyourcomponentsProps> {
return (
// your dynamic table html and you should not use inline style but define styles in
scss file and use them.
);
}
Then in your 'yourwebpart.ts' file you can render this component in render() method:
public render(): void {
const element: React.ReactElement<IyourwebpartProps > = React.createElement(
GetandRenderListItems,
{
description: this.properties.description,
// similarly assign values to other props
}
);
ReactDom.render(element, this.domElement);
}
Hopefully this will help.
Edit
you could use array.map() e.g. To render a table using your array you could write something like that.
public render () : React.ReactElement<IyourcomponentsProps> {
return(
<div className={styles.someStyle} >
<table className={styles.container}>
<tr>
<th>ID</th><th>Title</th> <th>Summary</th><th>Created</th
<th>Attachments</th>
</tr>
{ yourArray.map(function(item,key){
let url = this.titleurl(item.ID);
return (<tr className={styles.rowStyle} key={key}> //you can use key if you want to track index
<td></td> <td className={styles.someclass}><a href={url}>{item.Title}</a></td>
</tr> );
})}
</table>
</div>
);
}

I used .bind .map functions to make it happen.
For adding state to the project should be next upate.
I was struggling on handling the arrays and trouble printing
The entire component .tsx file
import * as React from 'react';
import styles from './A.module.scss';
import { IAProps } from './IAProps';
import { escape } from '#microsoft/sp-lodash-subset';
import { PageContext } from "#microsoft/sp-page-context";
import { HttpClient, IHttpClientOptions, HttpClientResponse, SPHttpClient, ISPHttpClientOptions, SPHttpClientResponse } from '#microsoft/sp-http';
import {
Environment,
EnvironmentType
} from '#microsoft/sp-core-library';
export interface ISPLists {
value: ISPList[];
};
export interface Istate {
ID:string;
Title: string;
isLoad?: boolean;
Url:string;
AttachmentFiles:{
Name:string;
Url:string;
ServerRelativeUrl: string;
};
}
export interface ISPList {
ID:string;
Title: string;
Summary : string;
NewsCategory: string;
Created:string;
AttachmentFiles:{
Name:string,
Url:string,
ServerRelativeUrl: string,
};
}
/*
MAIN STARTS HERE
2020-01-28
*/
export default class A extends React.Component<IAProps> {
constructor(props){
super(props);
this.loadNews();
this.getListData=this.getListData.bind(this);
this.geturl=this.geturl.bind(this);
this.loadNews=this.loadNews.bind(this);
}
//variables to render html tags
private ID:any = [];
private Title:any = [];
private Url:any = [];
private data:any =[];
private tro:any=[]; //<tr>
private trc:any=[]; //</tr>
private tdo:any=[]; //<td>
private tdc:any=[]; //</td>
private loadNews(){
this.getListData();
/*
this.getListData().then((response) => {
this.renderList(response.value);
});
*/ // when getlist and redner list are different functions
}
public geturl(query:string){
var path="/Lists/News/DispForm.aspx?ID=";
var currdir=this.props.pagecontext.web.absoluteUrl;
var result=currdir+path+query;
return result;
}
private tags(flag:boolean,first:boolean){
// if first data add <tr>
//if last data add </tr>
//
if (flag && first){
document.getElementById("tro").innerHTML = <tr>;
}else if (flag && !first){
document.getElementById("trc").innerHTML = </tr>;
}
}
private getListData() {
const opt: ISPHttpClientOptions = { headers: { 'Content-Type': 'application/json;odata=verbose' } };
this.props.SPHttpClient.get(this.props.pagecontext.web.absoluteUrl + "/_api/web/lists/getbytitle('News')/items?$select=*,AttachmentFiles&$expand=AttachmentFiles/Title&$orderby=ID desc", SPHttpClient.configurations.v1, opt).then((response: SPHttpClientResponse) => {
response.json().then((json: any) => {
for(let i=0;i<json.value.length;i++){
var url=this.geturl(json.value[i].ID);
if(i==0){ // add tags <tr> </tr>
let flag=true; let first=true;
this.tags(flag,first);
}else if(i==json.value.length){
let flag=false; let first=false;
this.tags(flag,first);
}
this.data.push({ID:<td>{json.value[i].ID}</td>,
Title:<td>{json.value[i].Title}</td>,
Url:<td><img src={json.value[i].AttachmentFiles[0].ServerRelativeUrl} width="300px" height="300px" /></td>
});
// debugger;
this.ID.push(json.value[i].ID);
// this.Title.push(json.value[i].Title);
//this.Url.push(json.value[i].AttachmentFiles[0].absoluteUrl);
this.forceUpdate();
}//close for
});// close response.json
});//close private getListData method
}
// json.value[i].Title}
//json.value[i].AttachmentFiles[0].absoluteUrl}
/*
<td>${json.value[i].Title}</td>
<td></td>
<td>${json.value[i].Created}</td>
<td><img src="${json.AttachmentFiles.ServerRelativeUrl}" width="300px" height="300px" /></td>
*/
public render(): React.ReactElement<IAProps>{
console.log(this.data);
return (
<div className={styles.a} >
<div className={styles.container} ></div>
<span className={ styles.title }>News</span>
<div className={styles.Table}>
<div className={styles.Heading}>
<table >
<tr>
<div className={styles.Cell}>Title</div>
<div className={styles.Cell}>Created</div>
<div className={styles.Cell}>IMGSRC</div>
</tr>
<div className={styles.Cell}>
<span id="tro"></span>
{this.data.map((data)=>
<div> {data.ID}</div>
)
}
</div>
<div className={styles.Cell}>
{this.data.map((data)=>
<div> {data.Title}</div>
)
}
</div>
<div className={styles.Cell}>
{this.data.map((data)=>
<div> {data.Url}</div>
)
}
<span id="trc"></span>
</div>
</table>
</div>
</div>
</div>
);
}
}
In render method .map function as follows
<div className={styles.Cell}>
{this.data.map((data)=>
<div> {data.Url}</div>
)
}
<span id="trc"></span>
</div>
To access data objects within array must declare .bind in the constructor after defining the class.
export default class A extends React.Component<IAProps> {
constructor(props){
super(props);
this.loadNews();
this.getListData=this.getListData.bind(this);
this.geturl=this.geturl.bind(this);
this.loadNews=this.loadNews.bind(this);
}
//variables to render html tags
private data:any =[];
Halfway through.
This is the prototype.
once I am able to extract the data , I can then style the CSS
Thank you for your help.

ReactJs - Pass Parameters to Event handler [duplicate]

This question already has answers here:
React 'cannot read property of undefined' when using map
(4 answers)
Closed 5 years ago.
I've just started looking basics of ReactJs. Following is my component to show list of buses. What I want exactly is I want to perform edit/delete operations over buses. But not able to pass busId of corresponding bus to my edit/delete methods.
Following is component code
import React, {Component} from "react";
import { withRouter } from 'react-router-dom'
import {Table,Badge, Label,FormGroup,Container, Row, Col, CardGroup, Card, CardBlock,CardHeader, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";
import {appSettings} from '../../../../Utils/Util.js';
import Pagination from "react-js-pagination";
var axios = require('axios');
class BusList extends React.Component {
constructor(props) {
super(props);
this.state = {
busList:[]
};
this.loadBuses = this.loadBuses.bind(this);
}
componentWillMount() {
this.loadBuses();
}
loadBuses() {
var url = ‘my-api-complete-url-here’;
axios.get(url)
.then((result) => {
var key = 0;
var buses = result.data.map(function(bus,i){
return <tr key={key++}>
<td key={key++}>{bus.id}</td>
<td key={(key++)}>{bus.number}</td>
<td key={(key++)}>
<Button onClick={(e)=>this.editBus(e, bus.id)}>Edit</Button>
<Button onClick={(e)=>this.deleteBus(e, bus.id)}>Delete</Button>
</td>
</tr>
});
this.setState({busList: buses});
})
.catch(function (error) {
console.log(error);
});
}
render() {
return (
<div className="animated fadeIn">
<Table hover responsive striped>
<thead>
<tr>
<th>Sr #</th>
<th>Bus Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{this.state.busList}
</tbody>
</Table>
</div>
);
}
editBus(id, e) {
console.log(‘Edit - Bus Id = ' +id);
}
deleteBus(id, e) {
console.log('Delete - Bus Id = ' +id);
}
}
export default BusList;
But when tapped on edit button, I receive this error(
Screenshot)

you're accessing it in wrong order, you're passing (e)=>this.editBus(e, bus.id) and in function you've defined editBus(id, e)
moreover you need to bind(this) at the end of map function
var buses = result.data.map(function(bus,i){
return <tr key={key++}>
<td key={key++}>{bus.id}</td>
<td key={(key++)}>{bus.number}</td>
<td key={(key++)}>
<Button onClick={(e)=>this.editBus(e, bus.id)}>Edit</Button>
<Button onClick={(e)=>this.deleteBus(e, bus.id)}>Delete</Button>
</td>
</tr>
});
Also, you don't need to define key variable. Instead, use second argument i of map function as it is the index of array element.
updated
you need to change your map code with
var buses = result.data.map(function(bus,i){
return <tr key={key++}>
<td key={key++}>{bus.id}</td>
<td key={(key++)}>{bus.number}</td>
<td key={(key++)}>
<Button onClick={(e)=>this.editBus(e, bus.id)}>Edit</Button>
<Button onClick={(e)=>this.deleteBus(e, bus.id)}>Delete</Button>
</td>
</tr>
}.bind(this));
The .bind(this) in the last line does the trick.

i want to display JSON result in reactJs

This is my JSON result
Using Map function to display JSON array elements in reactJs.I have tried with the following code. I'm unable to get results and it says "Cannot read property '_currentElement' of null". Kindly help me to solve this.
import React, { Component } from 'react';
import Header from './js/components/Header';
import './App.css';
import './dist/css/bootstrap.css';
import cookie from 'react-cookie';
import Request from 'superagent';
import { browserHistory } from 'react-router';
export default class Performance extends Component {
constructor() {
super();
this.state = {
fullName : cookie.load('fullName'),
empId : cookie.load('empId'),
userResults : false
};
if(cookie.load('empId') === undefined ){
browserHistory.push('/login')
}
}
getInitialState(){
return {userResults:false};
}
componentDidMount() {
var self = this;
var url = 'http://192.168.1.93:8081/employee/dashboard';
Request
.get(url)
.query({ empId: this.state.empId })
.set('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
.set('Authorization', 'Basic aHJtczox')
.set('Accept', 'application/json')
.end(function(err, res){
self.setState({userResults: res.body});
console.log(self.state.userResults);
});
}
render() {
return (
<div>
<Header />
<div className="container ">
<form className="form-signin1">
<h2 className="form-signin-heading">Customer Orientation{this.props.userButtons}</h2>
<table className="table text-center" >
<thead>
<th >Deliverables</th>
</thead>
<tbody>
{
this.state.userResults.response.QuestionSection.map(function(res){
res.question.map(function(res1){
return (
<tr>
<td>{res1.question}</td>
</tr>
)
})
})
}
<tr><td>sdfsdf</td></tr>
</tbody>
</table>
<button className="btn btn-lg btn-primary btn-block" type="button">Sign in</button>
</form>
</div>
</div>
);
}
}

Since this.state.userResults.response doesn't exist initially you get this error. Its is better of performing a check before iterating. Also you need to return the result of inner map function too like
{
this.state.userResults.response && this.state.userResults.response.QuestionSection.map(function(res){
return res.question.map(function(res1){
return (
<tr>
<td>{res1.question}</td>
</tr>
)
})
})
}

We Keep Coding

JavaScript is the programming language of the Web.

Error: Image is not display in CactusList Page - javascript

Related

[Vue warn]: Property or method "list" is not defined on the instance but referenced during render. Make sure that this property is reactive [...]

Can't we pass obj data as prop to different components in svelte

Transform a SPFX TS without JS framework to a React TS

ReactJs - Pass Parameters to Event handler [duplicate]

i want to display JSON result in reactJs

Categories

Resources