I have Json in the below form
[{
"shortName": "e2e",
"displayName": "E2E",
"description": "This is demo managed product",
"vertical": "Finance"
},
{
"shortName": "sfdsgs",
"displayName": "fsaewgs",
"description": "anything",
"vertical": "Community"
},
{
"shortName": "fga",
"displayName": "xcdf",
"description": "agfsf",
"vertical": "Finance"
}]
I want to use this json to display the option items in an antd tree select based on Vertical.
I want the filter to look like this , The Antd tree select i am using is
<TreeSelect
placeholder="Filter here"
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
style={{ width: "100%" }}
treeData={data}
treeCheckable={true}
onChange={onChange}
treeIcon={true}
/>
I am using react hooks , could somebody help me to convert the above json to the format Tree select requires so the output could be as shown in the image.
I made the demo on CodeSandBox
first i created distinct data based on "vertical" values then with map function created children for selectTree data.
i hope this could help you :)
const ConvertToTreeNode = () => {
const distinctData = [...new Set(OriginalJson.map(x => x.vertical))];
return [{
title: "Vertical",
value: "0-0",
key: "0-0",
children: distinctData.map((x, index) => ({
value: `0-0-${index}`,
key: `0-0-${index}`,
title: x
}))
};
}];
Demo
Related
I would really appreciate if someone can help resolving this issue.
I created an array in separate sheet to pass on the labels, values and images for a drop down selection.
Categories.js
export const categoriesListData = [
{
label: "Chocolates & Snacks",
value: "Chocolates & Snacks",
icon: require("../assets/CategoriesStack/chocolatesandSnacks.png")
},
{
label: "Baby Products",
value: "Baby Products",
icon: require("../assets/CategoriesStack/babyproducts.png")
}
]
When I import my above sheet in main component, the console.log gives data in the below format:
Array [
Object {
"icon": 46,
"label": "Chocolates & Snacks",
"value": "Chocolates & Snacks",
},
Object {
"icon": 47,
"label": "Baby Products",
"value": "Baby Products",
},
However, I need the data in exact original way where label, value and icon is without "".
My import "Categories" use in component is:
import { categoriesListData } from "../assets/categoriesConst";
<CategoriesLList data={categoriesListData} />
function CategoriesLList({ data }) {
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
**const [items, setItems] = useState(data);**
console.log(data);
return (
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
);
}
Please tell what is the best way to handle such a thing as I believe there will be lots of server passing data too in such format, how best to handle such things.
I am trying to manipulate a table data on the basis of the search in the table. So, what I have is this type of data:
this.props.datalist = {
"content": [{
"id": "5b7d4a566c5fd00507501051",
"companyId": null,
"title": "Senior/ Lead UI Developer",
"jobDescription": null,
"technology": "java"
},{
"id": "5b7d4a566c5fd005075011",
"companyId": null,
"title": "ead UI Developer",
"jobDescription": null,
"technology": "angular"
}]
}
In this I have this data coming from my `redux state. So I show this to user in the table form by passing this as a props.
I have a search field:
<input type="text"
id="searchJob"
className="form-control-sm border-0 flex-grow-1"
value={this.state.search}
placeholder="Company Name / Technology / Job title"
onChange={this.onInputChnage}
/>
<i className="fa fa-search search-job"></i>
onInputChnage = (e) => {
this.setState({
search: e.target.value
})
}
<div className="col-12 pr-0 pl-0">
<UserJobsTabel jobList={filteredList} />
</div>
</div>
Here , I got the filtered data in this array using filter
[{
"id": "5b7d4a566c5fd00507501051",
"companyId": null,
"title": "Senior/ Lead UI Developer",
"jobDescription": null,
"technology": "java"
},{
"id": "5b7d4a566c5fd005075011",
"companyId": null,
"title": "ead UI Developer",
"jobDescription": null,
"technology": "angular"
}]
Now, while setting state,
I am doing like this.
this.setState({ search: data })
If I want to set the state as with key like "content": [{}] like this then How can I do this ?
Because the way I am using it is like,
{this.props.dataList && this.props.dataList.content && this.props.dataList.content.length > 0 && this.props.dataList.content.sort((a, b) => b.createdAt - a.createdAt).map((item, key) => {
What I want to do is that the table data has two keys. One is title and Technolgoy now, search happens then it should check in the object and return the matched objects and that will be displayed on table.
Now if search has again nothing then it should show the default data that was present. Is there any way to do this?
The simplest way would be to create a variable in the render method containing the filtered props.datalist and use that for displaying.
something like
render(){
const { datalist:{content} } = this.props;
const { search } = this.state;
const filteredList = content.filter(job=>Object.values(job).some(value=>value.includes(search)));
return (<div>
//whatever
{filteredList.map(job=>....)}
</div>)
}
You could also do the filtering in the onInputChnage and store the filtered list in the local state.
Currently I am struggling with iterating over an object containing an array with objects. (and nested ones) I am trying to create a generic Table Component in React so it can be used by many views.
What did I setup?
tableData.map((prop, key) => {
return (
<TableRow key={key}>
<TableCell className={classes.tableCell} key={key}>
{prop.number}
</TableCell>
<TableCell className={classes.tableCell} key={key}>
{prop.TableType.max_occupancy}
</TableCell>
<TableCell className={classes.tableCell} key={key}>
{prop.price}
</TableCell>
<TableCell className={classes.tableCell} key={key}>
{prop.TableType.description}
</TableCell>
<TableCell className={classes.tableCell} key={key}>
<Button fullWidth color="primary">
Remove
</Button>
</TableCell>
</TableRow>
);
})
The problem that I am facing right now?
I can not create the content above in a dynamic way. I am encountering several issues like for example:
The nested objects logic
The logic should not clash with other implementations in other pages. (react)
What would I like to achieve?
I would like to achieve something that is generic and can be used in a wide range of scenarios and does not clash with other pages where this component is being used.
In the end it should look something like this in a visual way:
What data do I have?
[
{
"id": 1,
"number": 1,
"status": true,
"price": 12,
"table_type_id": 1,
"venue_id": 1,
"TableType": {
"id": 1,
"description": "Small Table",
"max_occupancy": 3
}
},
{
"id": 2,
"number": 2,
"status": true,
"price": 2,
"table_type_id": 2,
"venue_id": 1,
"TableType": {
"id": 2,
"description": "Medium Table",
"max_occupancy": 6
}
}
]
The Codesandbox directory with the full project:
https://codesandbox.io/embed/lwzz4j9mz?autoresize=1&eslint=1
The fill we are talking about is located at the Components/Table/Table.jsx. (I have added some dummy data in the comments that needs to be parsed to Table rows and cells)
Properties that needs be used in the view:
number
price
id
TableType
Hopefully someone can come up with a smart idea to help me out with this issue! Cheers for all the help and hopefully we can fix this together.
You should probably use an external library to get this done. But if you want to go for an in house approach this would be one way to go about it.
To the component, send the data and the header.The header should also specify how the data should be parsed to receive it's value.
var defaultTemaplate = '<TableRow><TableCell style={{ textAlign: "center" }}>Woooops! You haven\'t applied any tables for this venue yet. To start renting out tables you should add at least 3 tables tothe app. Just press the button above to start imediately.</TableCell></TableRow>'
var tableHead = [{
title: 'number',
type: 'data',
path: 'number'
},
{
title: 'TableType',
type: 'data',
path: 'TableType.description'
},
{
title: 'Edit/delete',
type: 'template',
templateString: '<button></button>'
}
] //for all columns
var tableData = [{
"id": 1,
"number": 1,
"status": true,
"price": 12,
"table_type_id": 1,
"venue_id": 1,
"TableType": {
"id": 1,
"description": "Small Table",
"max_occupancy": 3
}
},
{
"id": 2,
"number": 2,
"status": true,
"price": 2,
"table_type_id": 2,
"venue_id": 1,
"TableType": {
"id": 2,
"description": "Medium Table",
"max_occupancy": 6
}
}
]
console.log(genRows(tableData))
function getTableCells(data) {
return tableHead.map((opts) => {
if (opts.type === 'data') {
return `<TableCell className={classes.tableCell}>${_.at(data, opts.path)}</TableCell>`
}
if (opts.type === 'template') {
return opts.templateString
}
})
}
function genRows(tableData) {
if (tableData.length < 0) return defaultTemaplate;
return tableData.map((rowData) => `<TableRow>${getTableCells(rowData)}</TableRow>`)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
This is just an example to demonstrate one approach you could take, not full fledged code and can defenetly be improved.
I am a beginner in TYPO3 and have to say its very complex but I am struggling my way through.
I just want a simple way to get content from an internal TYPO3 Database Table which I created and forward it to JavaScript/JQuery/AJAX.
My BootstrapTable is working but just displays static content from var data.
I know there are ways from pageType, eID and $GLOBALS['TYPO3_DB']->exec_SELECTgetRows( /* ... */ ); to get the content of the Database Table, but how to forward it to JavaScript and display it?
There should not be another database call with credentials, just a way to the internal Database.
Searching for this answer since 2 days but can't find any easy and plausible answer.
Or do I have to take the long road via eID or pageType?
Edit due to comment:
Here is my JavaScript with bootstrapTable:
$(function () {
$('#table').bootstrapTable({
idField: 'name',
pagination: true,
search: true,
data: data,
columns: [{
field: 'name',
title: 'Name'
}, {
field: 'stargazers_count',
title: 'Stars'
}, {
field: 'forks_count',
title: 'Forks'
}, {
field: 'description',
title: 'Description'
}],
onPostBody: function () {
$('#table').editableTableWidget({editor: $('<textarea>')});
}
});
});
var data = [{
"name": "bootstrap-table",
"stargazers_count": "526",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
}, {
"name": "multiple-select",
"stargazers_count": "288",
"forks_count": "150",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
}, {
"name": "bootstrap-show-password",
"stargazers_count": "32",
"forks_count": "11",
"description": "Show/hide password plugin for twitter bootstrap."
}, {
"name": "blog",
"stargazers_count": "13",
"forks_count": "4",
"description": "my blog"
}, {
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension."
}
];
And calling it in my html with : <table id="table"></table>
My own created table in mysql database is: tx_table
I want the content of that table to be displayed in my bootstraptable Table
First solution. You can output your results directly into html using <script> tag and v:format.json.encode ViewHelper
action code:
$yourDataArrayFromPHP = array(
'var1' => 'val1',
'var2' => 'val2'
);
$this->view->assign('yourDataArrayFromPHP', $yourDataArrayFromPHP);
html:
<script>
var data = {v:format.json.encode(value: '{yourDataArrayFromPHP}')}
</script>
Now you can access this data in javascript data.var1
Also keep in mind that your data should be before bootstrapTable initialization.
I've been trying to learn React Native but it has been tougher than I thought. I can't create a simple "master-detail" app (and I couldn't find a good, simple tutorial explaining how to do it either).
I've managed to display a list of categories. After clicking one, it should display the category name + the list of items from this:
const data = [{
"category": "Fruits",
"items": [{
"name": "Apple",
"icon": "apple.png"
}, {
"name": "Orange",
"icon": "orange.png"
}]
}, {
"category": "Vegetables",
"items": [{
"name": "Lettuce",
"icon": "lettuce.png"
}, {
"name": "Mustard",
"icon": "mustard.png"
}]
}];
On my main class, I managed to display a list of categories:
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) =>
<Text onPress={this.onPressItem.bind(this, rowData.category)}>
{rowData.category}
</Text>}
/>
In my onPressItem I have the following:
onPressItem(category) {
this.props.navigator.push({
name: 'DetailView',
component: DetailView,
passProps: {
category
}
});
}
In my detail view, the category name is not being displayed:
class DetailView extends Component {
render() {
return (
<View style={ styles.container }>
<Text>Category: { this.props.category }</Text>
<TouchableHighlight onPress={ () => this.props.navigator.pop() }>
<Text>GO Back</Text>
</TouchableHighlight>
</View>
);
}
}
I'd really appreciate if someone can help me with this. It's probably something silly I'm doing wrong. Creating this simple thing can't be that hard. :/
Full code
I found a solution. I was making a mistake when rendering the view:
return React.createElement(
route.component,
{ navigator },
{...route.passProps}
);
The right way is:
return React.createElement(
route.component,
{ navigator, ...route.passProps }
);
Thanks to mehcode for helping me out.