I'm trying to get an object with the value and the inner text from a dropDown menu using a query selector:
<label>
<span>Project :</span>
</label>
<select name="projectId">
<option value="1">foo</option>
<option value="2">bar</option>
</select>I want an object that look like this:
{
"1":"foo",
"2":"bar"
}
here's where I come from
let options = await page.evaluate(() => {
return document.querySelector('select[name=projectId]').innerText;
});
but I only get a string of the inner text I can't figure out how to achieve my goal, can anyone help ?
You can use document.querySelectorAll to get all the option elements, spread syntax to convert it to an array, Array#map to extract the value and text of each option, and Object.fromEntries to convert it to a single object.
const res = Object.fromEntries(
[...document.querySelectorAll("select[name=projectId] > option")]
.map(o => [o.value, o.text]));
console.log(res);<label>
<span>Project :</span>
</label>
<select name="projectId">
<option value="1">foo</option>
<option value="2">bar</option>
</select>If you want to get multiple elements via a query selector, you can use querySelectorAll. It looks like you want to do something along these lines:
const options = document.querySelectorAll('[name="projectId"] option');
const optionData = {};
for (let option of options) {
optionData[option.value] = option.innerText;
}
console.log(optionData);<label>
<span>Project :</span>
</label>
<select name="projectId">
<option value="1">foo</option>
<option value="2">bar</option>
</select>let options = await page.evaluate(() => {
// Get all option items
const options = Array.from(document.querySelectorAll('select[name=projectId] option'));
// Iterate through all option items and set corresponding object properties
return options.reduce((acc, item) => {
return {...acc, ...{[item.value]: item.innerText}}
}, {})
});