How does one create a record, based on custom provided key and value data?

Question

I'm still a beginner in JavaScript and I need to create an object based on what the user types in the input fields.

Here are the input fields on my form:

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?

it's better to add the code that you are using to save the inputs values, this way it is easier to help — Zouhair Dre, Oct 04 '21 at 12:01

Peter Seliger · Accepted Answer · 2021-10-04T14:42:18.317

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; }

Thank you very much Peter, that's works perfectly for me!!! – Tainara Oct 04 '21 at 14:14 — Tainara, Oct 04 '21 at 14:14

Amir Rahman · Answer 2 · 2021-10-04T12:18:27.863

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>

How does one create a record, based on custom provided key and value data?

2 Answers2