JS 遍历 object 数组并将值更改为匹配键并创建一个新的 object 包含来自 object 数组的键[0]

Question

Goal:

I have a table, a object array (props.data). I need to get the value from each object and display them on their respective rows. However I can not copy them straight from props.data as I need to attach some key pair attributes to each column (dataField, text, filter, sort, hidden).

---

What's working:

It appears the rows are being handled correctly. I confirm this by printing the object array that holds the rows before it gets used by the table and it has all the data the way I require it.

---

What's not working:

The column data which is extracted from props.data is missing columns/data and has some incorrect values that should have been changed and extracted in my code snippet down below.

---

Current code:

 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)

---

Current outcome:

1. Not all the keys are getting put into the new object array "columns". when it should as far as i can tell all the keys are getting mapped over and pushed.
2. Only one of the rows is having the added, when this should be added to all rows as all rows will have that matching key.

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...
]

---

Desired outcome

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>

I am trying to map a object array to get the key of each keypair of the first object (As the objects will all have the same keys) and use that key in a new object array as a value to the keys "dataField" and "text".

In the process of doing that I am trying to add some additional key pairs to each object such as "filter", "sort" and "hidden".

Also, while I am doing this loop I am trying to change some of the values for the keys that match a string. All the keys that match the string should have a "" wrapped around its value.

---

What I am thinking of changing

from what i can tell, it should already be working. Though to make things cleaner, I am thinking to separate the two tasks. I am thinking to get the keys from props.data[0] from Object.keys, and store them in a string array. Then run a foreach on that array to make a object that can hold the key pairs needs for the columns.

I am puzzled on how to go about adding the to the matching keys on each object.

Could I please have help getting my desired result?

Answer 1

I solved this question by:

Creating the columns:

1. Separating the two functions.
2. Getting the column names by the Object keys
3. looping through each of those keys and store them with the required keypairs

Adding to the object array

4. Looped through each object and then each keypair in that object
5. Checked the value of the key pair against the string, and if it matched, then the change was made

I am honestly not sure why this works over the other attempt I made.

Could someone explain why this is working and the other wasn't? And if there is a better way to do the below?

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)