element.inner HTML не является функцией и вариантом со значением объекта

Question

Привет, я пытаюсь сделать следующее в javascript, в основном, у меня есть вход, который я получу входной текст из массива, и мне нужно, чтобы каждый параметр имел объект в качестве значения, чтобы я мог использовать некоторые атрибуты моего объекта

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">&times;</div>
              </div>
              <div class="select__body"></div>
            </div>
          </div>

по какой-то причине я не могу сопоставить свой массив и добавить его внутренний HTML в качестве имени атрибута моего объекта, и я также не нашел способа связать опцию с этим объектом.

Answer 1

Как говорится element.innerHTML is not a function. Вместо element.innerHTML(value.name); напишите element.innerHTML = value.name;

Итак, ваш код выглядит так:

modes.map((value) => {
    let element = document.createElement("div");
    element.classList.add("select__item");
    element.innerHTML = value.name;
});

Answer 2

Попробуйте следующее:

element.innerHTML = value.name;