Javascript 如何在地图中使用地图
这是我的数据和列{对象数组}Javascript 如何在地图中使用地图,javascript,html,reactjs,dictionary,Javascript,Html,Reactjs,Dictionary,这是我的数据和列{对象数组} let列=[ { 文本:“Id”, 数据字段:“用户ID”, }, {文本:“名称”,数据字段:“名称”}, { 案文:“性别”, 数据字段:“性别”, }, {文本:“年龄”,数据字段:“年龄”}, ]; let数据=[ {id:1,姓名:“Manik”,年龄:20岁,性别:“男”}, {id:2,姓名:“哈莎”,年龄:22,性别:“女性”}, {身份证号码:3,姓名:“罗伯特”,年龄:18岁,性别:“男”}, {id:4,姓名:“约翰”,年龄:24岁,性别:“
let列=[
{
文本:“Id”,
数据字段:“用户ID”,
},
{文本:“名称”,数据字段:“名称”},
{
案文:“性别”,
数据字段:“性别”,
},
{文本:“年龄”,数据字段:“年龄”},
];
let数据=[
{id:1,姓名:“Manik”,年龄:20岁,性别:“男”},
{id:2,姓名:“哈莎”,年龄:22,性别:“女性”},
{身份证号码:3,姓名:“罗伯特”,年龄:18岁,性别:“男”},
{id:4,姓名:“约翰”,年龄:24岁,性别:“女性”},
];
这是我的地图内的地图功能
{columns.map(column=>
{返回data.map((数据,i)=>{
返回(
{data.column.dataField}
)
我想访问附加到另一个对象(如data.column.data field
)的对象输出。此处column.data field
应返回输出,并反过来将其绑定到数据。是否可以进行更改
但是这段代码返回了这个错误
以下是解决方案:
// e.g. [
// [ 1, 2, 3, 4 ],
// [ 'Manik', 'harsha', 'robert', 'John', ],
// [ 'male', 'female', 'male', 'female', ],
// [ 20, 22, 18, 24 ],
// ]
columns.map((column) => {
// list of "one column of each data item", e.g. ids: [ 1, 2, 3, ... ]
return data.map( ( dataItem, i ) => {
return (
dataItem[ column.dataField ]
//<div>{dataItem[ column.dataField ]}</div>
);
} );
});
//例如[
// [ 1, 2, 3, 4 ],
//[‘Manik’、‘harsha’、‘robert’、‘John’、],
//[‘男性’、‘女性’、‘男性’、‘女性’、],
// [ 20, 22, 18, 24 ],
// ]
columns.map((column)=>{
//“每个数据项的一列”列表,例如ID:[1、2、3、…]
返回data.map((dataItem,i)=>{
返回(
dataItem[column.dataField]
//{dataItem[column.dataField]}
);
} );
});
(这假设
数据字段
属性包含要使用的数据
键,但它们也必须保持一致。请参阅问题的注释。)缺少一些)
和}
结尾处?要使用字符串作为属性名称,可以使用以下语法:数据[column.dataField]
但是您必须将数据字段
的值更改为与数据
中对象的属性名称相同(id
而不是UserId
,name
而不是name
,等等)。我想您需要数据[column.dataField]
而不是data.column.dataField
。不提及数据字段与对象的实际字段不匹配。
// e.g. [
// [ 1, 2, 3, 4 ],
// [ 'Manik', 'harsha', 'robert', 'John', ],
// [ 'male', 'female', 'male', 'female', ],
// [ 20, 22, 18, 24 ],
// ]
columns.map((column) => {
// list of "one column of each data item", e.g. ids: [ 1, 2, 3, ... ]
return data.map( ( dataItem, i ) => {
return (
dataItem[ column.dataField ]
//<div>{dataItem[ column.dataField ]}</div>
);
} );
});