Hey there! I'm currently working on a JavaScript project where I have an input that retrieves text from an array. Each option in the array needs to be linked to an object so I can utilize its attributes.
const data = [
{
name: "SIMPLES NACIONAL – MEI",
funcionarioIncrease: 49.99,
socioIncrease: 0,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 49.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 99.99,
},
],
},
{
name: "SIMPLES NACIONAL – SERVIÇOS",
funcionarioIncrease: 25,
socioIncrease: 25,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 149.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 199.99,
},
],
},
];
const Modes = () => {
if (data instanceof Array) {
return data.map((value) => {
return {
name: value.name,
funcionarioIncrease: value.funcionarioIncrease,
socioIncrease: value.socioIncrease,
faturamento: value.FATURAMENTO,
};
});
} else {
return null;
}
};
let results = function () {
const modes = Modes();
let selectHeader = document.querySelectorAll(".select__header");
let selectItem = document.querySelectorAll(".select__item");
modes.map((value) => {
let element = document.createElement("div");
element.classList.add("select__item");
element.innerHTML(value.name);
});
selectHeader.forEach((item) => {
item.addEventListener("click", selectToggle);
});
selectItem.forEach((item) => {
item.addEventListener("click", selectChoose);
});
function selectToggle() {
this.parentElement.classList.toggle("is-active");
}
function selectChoose() {
let text = this.innerText,
select = this.closest(".select"),
currentText = select.querySelector(".select__current");
currentText.innerText = text;
select.classList.remove("is-active");
}
};
results();.select {
position: relative;
width: 100%;
}
.select.is-active .select__body {
display: block;
}
.select__header {
border: 1px solid #ccc;
cursor: pointer;
display: flex;
}
.select__current {
font-size: 18px;
line-height: 24px;
padding: 8px;
}
.select__icon {
align-items: center;
display: flex;
flex-shrink: 0;
justify-content: center;
height: 40px;
margin-left: auto;
text-align: center;
width: 40px;
}
.select__body {
border: 1px solid #cccccc;
border-top: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
.select__item {
cursor: pointer;
font-size: 16px;
line-height: 24px;
padding: 8px;
}
.select__item:hover {
background-color: #f2f2f2;
} <div class="service_mode flex">
<div class="select is-active">
<div class="select__header">
<span class="select__current">Value 1</span>
<div class="select__icon">×</div>
</div>
<div class="select__body"></div>
</div>
</div>I seem to be facing difficulty in mapping my array and adding its inner HTML as the attribute name of my object. Additionally, I am struggling to link the options to their respective objects.