How does one create a record, based on custom provided key and value data? [duplicate]-CodePudding

This question already has answers here:

After the user enters the values for column and value, this is how the data is being received:

[
  [{
      label: "Column",
      value: "column1",
      name: "01",
    },
    {
      label: "Value",
      value: "value1",
      name: "02",
    },
  ],
  [{
      label: "Column",
      value: "column2",
      name: "10",
    },
    {
      label: "Value",
      value: "value2",
      name: "11",
    },
  ],
];

But that's not how it can be saved to send the database, the way I need to send it is like this:

{
  // other data
  
  "column_names": {
    "column1": "value1",
    "column2": "value2"
  }
}

Could you tell me how can I create an Object based on what the user types? But in the structure I showed in the second code snippet?

CodePudding user response：

The data structure provided by the OP can be seen as an array of object entries where each entry holds a tuple of key and value related meta data.

Thus a straightforward approach does reduce the provided data into the desired record.

const receivedData = [
  [{
    label: "Column",
    value: "column1",
    name: "01",
  }, {
    label: "Value",
    value: "value1",
    name: "02",
  }], [{
    label: "Column",
    value: "column2",
    name: "10",
  }, {
    label: "Value",
    value: "value2",
    name: "11",
  }],
];

const recordData = {

  // other data

  "column_names": receivedData
    .reduce((data, [ keyData, valueData ]) => {
      const key = keyData.value;
      const { value } = valueData;
      return Object.assign(data, { [key]: value });
    }, {})
};
console.log({ recordData });

.as-console-wrapper { min-height: 100%!important; top: 0; }

CodePudding user response：

your expected result is object design based where you can group value by their names which is a bit more lengthy but if you wanted to improve object design to do same task i have a suggested code try this

use data attribute on input fields with their name then get all the values in one object with their corresponding key names see an example below

function getData(root){
    const Els = root.querySelectorAll("[data]"),newOb = {}
    Els.forEach(each=>{
        let key = each.getAttribute("data"), val = each.value
        newOb[key] = val
    })
    return newOb            
}
const main = document.querySelector(".root")
main.oninput = function(){console.log(getData(main))}

<div class="root">
    <input class="border" data="col1" type="text">
    <input class="border" data="col2" type="text">
    <input class="border" data="col3" type="text">
    <input class="border" data="col4" type="text">
</div>

Page link：https//www.codepudding.com/frontend/139523.html

Prev:How do i sort a 2D array or multiple arrays by the length of the array using bubble sort

Next:Javascript Array is displayed with unwanted comma