I'm creating and populating an object with user input from x <input> fields.
So far I've managed to create the object and populate it with the user input.
However I'm stuck on my next step.
I want to grab and modify the user input and separate it into nested properties using comma to split.
This might be an easy task, but I can't come up with a working solution. How can I achieve this? (not sure how well I explained myself, so I posted an example for the desired output)
The html: (potentially more input fields than those 2x2)
<input type="text" name="test_1.Title" class="tests">
<input type="text" name="test_1.String" class="tests">
<input type="text" name="test_2.Title" class="tests">
<input type="text" name="test_2.String" class="tests">
function objectMaker() {
function objectSubs(obj, keys, value) {
let key = keys.shift()
if (keys.length) {
obj[key] = obj[key] || {}
objectSubs(obj[key], keys, value)
return
}
obj[key] = value
}
function grabTestData(){
var inputs = document.getElementsByClassName('tests');
var testObject = {}
Object.keys(inputs).forEach(i => {
let inputName = inputs[i].getAttribute('name');
objectSubs(testObject, inputName.split('.'), inputs[i].value)
})
}
grabTestData()
}
current object:
var testObject = {
tests1: {
title: "random title",
string: "somestring, other string, and anotherString",
},
tests2: {
title: "other random title",
string: "thisString, thatString, a String there",
},
}
desired object:
var testObject = {
tests1: {
title: "random title",
string: {
substring1: "somestring",
substring2: "other string",
substring3: "and anotherString",
},
},
tests2: {
title: "other random title",
string: {
substring1: "thisString",
substring2: "thatString",
},
},
}
If you want to make a function to convert the object over to your desired format:
function splitStrings(obj) {
Object.values(obj).forEach(val => val.string = Object.fromEntries(val.string.split(',').map((e, i) => ["substring"+(i+1), e.trim()])));
return obj;
}
Object.values to get an array of your { title, string } objectsforEach object, sets .string to an object created from converting each comma separated value in the string to an entry of format [substringN, value]Demo:
var testObject = {
tests1: {
title: "random title",
string: "somestring, other string, and anotherString",
},
tests2: {
title: "other random title",
string: "thisString, thatString, a String there",
},
}
function splitStrings(obj) {
Object.values(obj).forEach(val => val.string = Object.fromEntries(val.string.split(',').map((e, i) => ["substring"+(i+1), e.trim()])));
return obj;
}
splitStrings(testObject);
console.log(testObject);If you want an array of substrings instead, you can do:
function splitStrings(obj) {
Object.values(obj).forEach(val => val.string = val.string.split(',').map(e=>e.trim());
return obj;
}
var testObject = {
tests1: {
title: "random title",
string: "somestring, other string, and anotherString"
},
tests2: {
title: "other random title",
string: "thisString, thatString, a String there"
}
};
testObject.tests1.string = testObject.tests1.string.split(",");
testObject.tests2.string = testObject.tests2.string.split(",");
console.log(testObject);
The output for this code is:
{
tests1: {
title: 'random title',
string: [ 'somestring', ' other string', ' and anotherString' ]
},
tests2: {
title: 'other random title',
string: [ 'thisString', ' thatString', ' a String there' ]
}
}