I have to update the value name attribute of my object at particular index. I am having index no and also array.
This is my code,
this.menus.forEach(x => {
let temp = this.menus.findIndex(function (item) {
return item.name == 'Cost Center';
});
// this.menus.values[temp].name=this.newCC;
this.menus[temp].name=this.newCC;
console.log("menu temp",temp);
This is my array structure,
Array(11)
0:{_id: "5acc9e6320a7d71ab8372120", name: "DashBoard", link: "dashboard", icon: "fa fa-list", key: "dashboard", …}
1: {_id: "5acc9e6320a7d71ab837211f", name: "My Products", link: "print-products", icon: "fa fa-barcode", key: "print-products", …}
2:{sequence: null, key: "my-saved-jobs", icon: "fa fa-file-text-o", link: "my-saved-jobs", name: "My Saved Jobs", …}
3:{sequence: null, key: "my-placed-orders", icon: "fa fa-list-alt", link: "my-placed-orders", name: "My Orders", …}
4:{_id: "5acc9e6320a7d71ab837211b", name: "Site Design Setup", link: "storefront-setup", icon: "fa fa-university", key: "storefront-setup", …}
5:{_id: "5acc9e6320a7d71ab8372118", name: "Reports", link: "reports", icon: "icon-report", key: "reports", …}
6:{_id: "5accb9425241ed3270585b93", name: "Print Service Category", link: "print-service-category", icon: "fa fa-tasks", key: "print-service-category", …}
7:{sequence: null, key: "my-saved-files", icon: "fa fa-floppy-o", link: "my-saved-files", name: "My Saved Files", …}
8:{sequence: null, key: "product-list", icon: "fa fa-list", link: "product-list", name: "Product List", …}
9:{_id: "5acc9e6320a7d71ab8372119", name: "Deal Code", link: "deal- code", icon: "fa fa-university", key: "deal-code", …}
10:{sequence: null, key: "cost-center", icon: "icon-costCenter", link: "cost-center", name: undefined, …}
length:11
can anyone help to solve my issue?
Please reply.
Actually I was doing an mistake while writing code, this code should be written where we are getting response from backend i.e within the scope of success response.
this is my new code,
this.httpService.save(UrlDetails.$getPaymentSetting, client)
.subscribe(response => {
if (response.responseCode == 200) {
let paymentSetting = response.responseData;
console.log("client PAYMENT RESPONSE ",paymentSetting);
if( paymentSetting.paymentOption.customPayment.length != 0){
<------Some Code----->
.
.
this.menus.forEach(x => {
let temp1 = this.menus.findIndex(function (item) {
return item.name == 'Cost Center';
});
let temp2 = this.menus.findIndex(function (item) {
return item.name == 'Deal Code';
});
this.menus[temp1].name= this.newCC;
this.menus[temp2].name= this.newDC;
});
}
})
Related
interface DataType {
id: string;
first_name: string;
last_name: string;
email: string;
phone: string;
ip_address: string;
is_active: Boolean;
Avatar: string;
}
const columns: ColumnsType<DataType> = [
{
title: 'First Name',
dataIndex: 'first_name',
key: 'first_name',
render: (first_name, data) => {
return (
<div>
<img className='customers-avatar' src={data.Avatar} alt="" />
{first_name}
</div>
)
},
},
{
title: 'Last Name',
dataIndex: 'last_name',
key: 'last_name',
},
{
title: 'Email Address',
dataIndex: 'email',
key: 'email',
},
{
title: 'Phone Number',
dataIndex: 'phone',
key: 'phone',
},
{
title: 'Last Login',
render: () => {
return (
<p>April 2, 2022</p>
)
},
},
{
title: '',
key: 'action',
render: () => (
<Space size="middle">
<Link to="/shipments" className='space-action' >Shipment</Link>
<Link to="/" className='space-action-green'>Edit</Link>
</Space>
),
},
];
const Customers: React.FC = () => {
const [customersData, setCustomersData] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
getCustomers();
});
const getCustomers = () => {
setLoading(true);
return makeAPICall({
path: `get_customers`,
method: "GET",
})
.then((data) => {
setCustomersData(data);
setLoading(false);
console.log(data);
})
.catch((err) => {
setLoading(false);
console.log(err);
});
}
return (
<SiderLayout>
<div className="site-layout-background" style={{ padding: "40px 40px", minHeight: 710 }}>
<button type='submit'>Add Customer {" "} +</button>
{loading ? 'loading...' : (
<div>
{!customersData ? ("No data") : (<Table columns={columns} dataSource={customersData} />)}
</div>
)}
</div>
</SiderLayout>
)
}
export default Customers;
I've consumed the get_customers api, which I think I did it correctly, but the data is not displaying on the browser.
When I went to inspect element, I thought is as a result of CORS, so I turned on CORS, but it wasn't still working, it would fetch all the data in that process of loading the state, it would display a blank screen at the end.
With webRequest in was quite easy to do:
chrome.webRequest.onBeforeSendHeaders.addListener(this.addTabIdToHeader({ tabId }), { urls: ['http://*/*'] }, ['blocking', 'requestHeaders']);
Now in declarativeNetRequest there is no current tab id
rule = {
id: id,
priority: 1,
action: {
type: 'modifyHeaders',
requestHeaders: [{
header: 'X-SomeInfo-TabId',
operation: 'set',
value: \* ?? TabId ?? *\,
}],
},
condition: {
regexFilter: `http://${url}/.*`,
resourceTypes: ['main_frame'],
},
};
this is my code below
const columns = [
{
key: '1',
title: 'id',
dataIndex: 'id'
},
{
key: '2',
title: 'status',
dataIndex: 'status',
render: (text) => <a> {text} </a>
},
];
I wanna display data ( text/id ) like below code
const columns = [
{
key: '1',
title: 'id',
dataIndex: 'id'
},
{
key: '2',
title: 'status',
dataIndex: ['status', 'id'],
render: (text) => <a> {text} / {id} </a>
},
];
I tried to like this samples
1. dataIndex: ['status', 'id']
2. dataIndex: 'status.id'
but that doesn`t work. (version 4.14.0)
how can I display like that? please reply here. thanks.
I'll answer assuming what you pass to the dataSource is an array of objects which looks like below.
interface DataModel {
id: number;
status: string;
}
If so, you can use the second parameter in the render method which will have the record. Hence record.id will give you the id.
const columns = [
{
key: '1',
title: 'id',
dataIndex: 'id'
},
{
key: '2',
title: 'status',
dataIndex: ['status'],
render: (text: any, record: any) => <a> {text} / {record.id} </a>
},
];
try this solution
{
title: 'Name',
dataIndex: 'address',
key: 'name',
render: ({ city, street }) => (
<Typography>{`${city} ${street}`}</Typography>
),
},
try this
{
title: "Task",
dataIndex: ["task","name"]
},
Im adding my react project for ant design4 table and ant design input fields. any one know to how can validate that input required
Thanks
stackablitz here
code here
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: tags => (
<>
{tags.map(tag => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</>
),
},
{
title: 'Action',
key: 'action',
render: (text, record) => (
<Space size="middle">
<a>Invite {record.name}</a>
<a>Delete</a>
</Space>
),
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: <input/>,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: <input/>,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: <input/>,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
const onFinish = values => {
console.log(values);
};
ReactDOM.render(
<div>
<Form name="control-hooks" onFinish={onFinish}>
<Table columns={columns} dataSource={data} /> <div><Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button> </Form.Item>
Just enclose the <input/> in <Form.Item> and use the rules prop of it. You can see all the possible rules here. I suggest use the <Input/> of antd and set a width on it.
const data = [
{
key: "1",
name: "John Brown",
age: (
<Form.Item
name="age1"
rules={[{ required: true, message: "Age is required" }]}
>
<Input style={{ width: 150 }} />
</Form.Item>
),
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"],
},
...
];
see this working link
In Ant Nested table - When expanding a row, I want to make an api call and get the data to show the nested table.
The function expandedRowRender, expects to return the nested table, it does not accept a promise.
How can I show a nested Ant table using ajax call?
I have tried to recreate the scenario for reference.
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
import reqwest from "reqwest";
const nestedColumns = [
{
title: "Name",
dataIndex: "name",
sorter: true,
render: name => `${name.first} ${name.last}`,
width: "20%"
},
{
title: "Gender",
dataIndex: "gender",
filters: [
{ text: "Male", value: "male" },
{ text: "Female", value: "female" }
],
width: "20%"
},
{
title: "Email",
dataIndex: "email"
}
];
class App extends React.Component {
state = {
data: []
};
fetch = (params = {}) => {
console.log("params:", params);
reqwest({
url: "https://randomuser.me/api",
method: "get",
data: {
results: 10,
...params
},
type: "json"
}).then(data => {
return (
<Table
columns={nestedColumns}
dataSource={data.results}
pagination={false}
/>
);
// this.setState({
// data: data.results
// });
});
};
expandedRowRender = () => {
this.fetch();
return <table columns={nestedColumns} dataSource={this.state.data} />;
};
render() {
const columns = [
{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Platform", dataIndex: "platform", key: "platform" },
{ title: "Version", dataIndex: "version", key: "version" }
];
const data = [
{
key: 1,
name: "Screem",
platform: "iOS",
version: "10.3.4.5654"
}
];
return (
<Table
columns={columns}
dataSource={data}
pagination={false}
expandedRowRender={this.expandedRowRender}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));
I try my level best to answer your question. Here is the reduced type of code and you can get an idea of how to do that.
In state,
state = {
data: null,
loading: false,
};
Here is your function to make API call,
fetch = (expanded, record) => {
axios.get(`put your api to load nested table`)
.then(res => {
const data = res.data;
this.setState({
...this.state.data,
data,
loading: true
})
}).catch(error => {
console.log(error, "error")
})
}
After that,
expandedRowRender=() => {
if(this.state.loading){
const nestedTableData = this.state.data.map(row => ({
key: row.id,
Id: row.id,
name: 'test',
gender: 'gender',
}))
const nestedColumns = [
{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Gender", dataIndex: "gender", key: "gender" },
];
return <Table columns={nestedColumns} dataSource={nestedTableData } pagination={false} />
}
};
And put following code below return
<Table
className="components-table-demo-nested"
columns={columns}
dataSource={tableData}
expandable={{
expandedRowRender: this.expandedRowRender,
rowExpandable: record => true,
onExpand: this.fetch
}}
/>
I hope it may help you and let me know if it does. :)