JS 遍历对象数组并将值更改为匹配的键并创建一个包含对象数组 [0] 中的键的新对象
Posted
技术标签:
【中文标题】JS 遍历对象数组并将值更改为匹配的键并创建一个包含对象数组 [0] 中的键的新对象【英文标题】：JS iterate through an object array and change the value to the matching key & create a new object containing the keys from the object array[0] 【发布时间】：2021-05-16 20:27:16 【问题描述】：目标：
我有一个表，一个对象数组（props.data）。我需要从每个对象中获取值并将它们显示在各自的行上。但是我不能直接从 props.data 复制它们，因为我需要将一些键对属性附加到每一列（数据字段、文本、过滤器、排序、隐藏）。
工作原理：
看来这些行得到了正确处理。我通过在表格使用之前打印包含行的对象数组来确认这一点，并且它具有我需要的所有数据。
什么不起作用：
从 props.data 中提取的列数据缺少列/数据，并且有一些不正确的值，应该在下面的代码 sn-p 中更改和提取。
当前代码：
function store_file_name(event)
localStorage.setItem('file_name', event.target.innerhtml);
//This handles the setting for each column
var columns = []
var index = 0
props.data.map(data =>
// this handles the default refinemnet toggles. From prop default_refine_toggle_display. The prop object array string names needs to have the column name post name_name
var hidden_status = true
default_refine_toggle_display.forEach(element =>
if (Object.keys(data)[index] == element)
hidden_status = false
);
//FIXME: This will add a link to th efile viewer page as well as store the name as a localstorage which is then used by the file viewer page to as the path to get the file that the user wants to view.
if (Object.keys(data)[index] == "CV") //FIXME: This only find the CV for ID 11? And then fires a few times for the same ID
console.log("The Column key:", Object.keys(data)[index])
console.log("The Column Value:", Object.values(data)[index])
console.log("this is meant to be key pair: ", data[index])
data.CV = <a onClick=store_file_name className="link" href="/file_viewer" > data.CV</a>
// FIXME: Why are we not getting all the columns pushed? There as some getting missed such as "job title name"
columns.push(
dataField: Object.keys(data)[index],
text: Object.keys(data)[index],
filter: textFilter(
getFilter: filter =>
filter_array.push(filter);
),
sort: true,
hidden: hidden_status
)
index++
)
console.log("COLUMNS, CURRENT RESULT:", columns)
console.log("props.data, CURRENT RESULT:", props.data)
目前的结果：
-
并非所有的键都被放入新的对象数组“列”中。据我所知，它应该何时被映射并推送。
只有一个行被添加，此时应该将它添加到所有行，因为所有行都将具有该匹配键。
Columns =
[
"dataField": "ID",
"text": "ID",
"filter":
"props":
,
"sort": true,
"hidden": false
,
"dataField": "First",
"text": "First",
"filter":
"props":
,
"sort": true,
"hidden": false
,
"dataField": "Middle",
"text": "Middle",
"filter":
"props":
,
"sort": true,
"hidden": false
,
"dataField": "Last",
"text": "Last",
"filter":
"props":
,
"sort": true,
"hidden": false
,
"dataField": "Job Listing ID",
"text": "Job Listing ID",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Recruiter ID",
"text": "Recruiter ID",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "CV",
"text": "CV",
"filter":
"props":
,
"sort": true,
"hidden": false
,
"dataField": "C Letter",
"text": "C Letter",
"filter":
"props":
,
"sort": true,
"hidden": false
,
"dataField": "NDA",
"text": "NDA",
"filter":
"props":
,
"sort": true,
"hidden": false
,
"dataField": "Photo",
"text": "Photo",
"filter":
"props":
,
"sort": true,
"hidden": false
,
"dataField": "Address",
"text": "Address",
"filter":
"props":
,
"sort": true,
"hidden": false
,
"dataField": "Sex",
"text": "Sex",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Email",
"text": "Email",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Building #",
"text": "Building #",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Street #",
"text": "Street #",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Street Name",
"text": "Street Name",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Town Name",
"text": "Town Name",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "State",
"text": "State",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Country",
"text": "Country",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Status ID",
"text": "Status ID",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Change Datetime",
"text": "Change Datetime",
"filter":
"props":
,
"sort": true,
"hidden": true
,
"dataField": "Why Should We",
"text": "Why Should We",
"filter":
"props":
,
"sort": true,
"hidden": true
]
props.data [
"ID": 5,
"First": "first",
"Middle": null,
"Last": "last",
"Job Listing ID": null,
"Recruiter ID": null,
"CV": "null",
"C Letter": "null",
"NDA": null,
"Photo": null,
"Address": null,
"Sex": null,
"Email": "test@outlook.com",
"Building #": null,
"Street #": null,
"Street Name": null,
"Town Name": null,
"State": null,
"Country": "Australia",
"Status ID": 1,
"Change Datetime": "1899-12-31T14:00:00.000Z",
"Why Should We": null,
"Submitted_datetime": null,
"Accepted_datetime": null,
"Rejected_datetime": null,
"Pending_datetime": null,
"Completed_datetime": null,
"job_title_id": null,
"Created_datetime": null,
"required_amount": null,
"ended_datetime": null,
"description": "Submitted, waiting for review",
"required_skills": null,
"Job_title_name": null,
"salary_base_id": null,
"name": "Submitted"
etc..,
etc...
]
期望的结果
columns should = the same as above but not be missing any of the keys from props.data
props.data should = the same as above but should have all the "CV" values be wrapped in <a></a>
我正在尝试映射一个对象数组以获取第一个对象的每个键对的键（因为对象都将具有相同的键）并在新对象数组中使用该键作为键的值“dataField " 和 "文本"。
在此过程中，我尝试为每个对象添加一些额外的密钥对，例如“过滤器”、“排序”和“隐藏”。
此外，在执行此循环时，我正在尝试更改与字符串匹配的键的一些值。与字符串匹配的所有键都应在其值周围有一个“”。
我想改变什么
据我所知，它应该已经可以工作了。虽然为了使事情更清洁，但我正在考虑将这两个任务分开。我正在考虑从 Object.keys 的 props.data[0] 中获取密钥，并将它们存储在字符串数组中。然后在该数组上运行 foreach 以创建一个可以保存列所需的键对的对象。
我很困惑如何在每个对象上添加匹配键。
能否请我帮忙获得我想要的结果？
【问题讨论】：
【参考方案1】：我通过以下方式解决了这个问题：
创建列：
-
分离两个函数。
通过对象键获取列名
循环遍历每个密钥并将它们与所需的密钥对一起存储
添加到对象数组
-
循环遍历每个对象，然后遍历该对象中的每个密钥对
根据字符串检查密钥对的值，如果匹配，则进行更改
老实说，我不确定为什么这对我所做的其他尝试有效。
有人能解释一下为什么这行得通而另一个不行吗？如果有更好的方法来执行以下操作？
function set_up_columns(data)
var columns = []
var column_names = Object.keys(data[0])
column_names.forEach(element =>
var hidden_status = true
default_refine_toggle_display.forEach(element_ => // this sets the hidden attribute/value. It will mark as false if the
if (element == element_)
hidden_status = false
);
columns.push(
dataField: element,
text: element,
filter: textFilter(
getFilter: filter =>
filter_array.push(filter);
),
sort: true,
hidden: hidden_status
)
);
return columns
var columns = set_up_columns(props.data)
function add_view_file_to_column_values(data)
var number_of_columns_and_keypairs = Object.keys(data[0]).length//this gets thesize of the object
data.map(data_ =>
//each run of this is a row
for (let index = 0; index < number_of_columns_and_keypairs; index++)
//each run of this is a column in that row
if (Object.keys(data_)[index] == "CV")
console.log("data", Object.keys(data_)[index])
data_[Object.keys(data_)[index]] = <a onClick=store_file_name className="link" href="/file_viewer" > Object.values(data_)[index]</a>
)
return data
props.data = add_view_file_to_column_values(props.data)
【讨论】：
以上是关于JS 遍历对象数组并将值更改为匹配的键并创建一个包含对象数组 [0] 中的键的新对象的主要内容，如果未能解决你的问题，请参考以下文章
SwiftUI 使用 List 和 Foreach 遍历字典中的键并创建列表视图