объект массива .map и forEach - PullRequest
Новая
       3

объект массива .map и forEach

0 голосов
/ 13 июля 2020

Здравствуйте, у меня проблема при отображении или прокрутке массива объектов. У меня есть идентификатор в каждом объекте: 

const data = [
  {
    id: 1,
    name: "SIMPLES NACIONAL – MEI",
    funcionarioIncrease: 49.99,
    maxFuncionario: 1,
    socioIncrease: 0,
    maxSocio: 5,
    FATURAMENTO: [
      {
        id: 1,
        name: "ATÉ 30.000,00",
        value: 49.99,
      },
      {
        id: 2,
        name: "De 30.001,00 a 50.000,00 ",
        value: 99.99,
      },
    ],
  },
  {
    id: 2,
    name: "SIMPLES NACIONAL – SERVIÇOS",
    funcionarioIncrease: 25,
    maxFuncionario: 3,
    socioIncrease: 25,
    maxSocio: 5,
    FATURAMENTO: [
      {
        id: 1,
        name: "ATÉ 50.000,00",
        value: 149.99,
      },
      {
        id: 2,
        name: "De 40.001,00 a 50.000,00 ",
        value: 199.99,
      },
    ],
  },
];

я пробую с этим: 

function creteFatuOptions() {
data.forEach((value) => console.log(value))
data.map((value) => console.log(value))
}

, но для по какой-то причине мой идентификатор для каждого объекта всегда равен 1: 

{id: 1, name: "SIMPLES NACIONAL – MEI", funcionarioIncrease: 49.99, maxFuncionario: 1, socioIncrease: 0, …}
{id: 1, name: "SIMPLES NACIONAL – SERVIÇOS", funcionarioIncrease: 25, maxFuncionario: 3, socioIncrease: 25, …}

я не знаю почему, но идентификаторы всех моих объектов уходят как 1

полный фрагмент: 

const data = [{
    id: 1,
    name: "SIMPLES NACIONAL – MEI",
    funcionarioIncrease: 49.99,
    maxFuncionario: 1,
    socioIncrease: 0,
    maxSocio: 5,
    FATURAMENTO: [{
        id: 1,
        name: "ATÉ 30.000,00",
        value: 49.99,
      },
      {
        id: 2,
        name: "De 30.001,00 a 50.000,00 ",
        value: 99.99,
      },
    ],
  },
  {
    id: 2,
    name: "SIMPLES NACIONAL – SERVIÇOS",
    funcionarioIncrease: 25,
    maxFuncionario: 3,
    socioIncrease: 25,
    maxSocio: 5,
    FATURAMENTO: [{
        id: 1,
        name: "ATÉ 50.000,00",
        value: 149.99,
      },
      {
        id: 2,
        name: "De 40.001,00 a 50.000,00 ",
        value: 199.99,
      },
    ],
  },
];

function creteFatuOptions() {
  const container = document.querySelector(".faturamento-container");
  const mode = document.querySelector(".selected").getAttribute('data-value')
  console.log(mode)
  data.forEach((value) => console.log(value))
  data.map((value) => console.log(value))
  data.map((value) => {
    console.log(mode)
    console.log(value.id)
    console.log(value.name)
    console.log(value.id == mode)
  });
}

function createInput(id) {
  var inputRadio = document.createElement("input");

  if (id) {
    inputRadio.id = id;
    inputRadio.name = "category";
    inputRadio.type = "radio";
    inputRadio.value = id;
    inputRadio.classList.add("radio");
    return inputRadio;
  }
  return null;
}

function createModeOptions() {
  const container = document.querySelector(".options-container");
  data.forEach((value) => {
    const optionDiv = document.createElement("div");
    optionDiv.classList.add("option");
    container.append(optionDiv);
    const input = createInput(value.id);
    if (!input) {
      return null;
    }
    optionDiv.append(input);
    var label = document.createElement("label");
    label.htmlFor = value.id;
    label.innerHTML = value.name;
    optionDiv.append(label);
  });
}

function selectMode() {
  createModeOptions();
  const selectedMode = document.querySelector("div#serviceMode");
  const optionsContainer = document.querySelector(".options-container");
  const optionsList = document.querySelectorAll(".option");
  data.forEach((item) => {
    if ((item.id = 1)) {
      selectedMode.innerHTML = item.name;
      selectedMode.setAttribute("data-value", item.id);
    }
  }), {
    once: true
  };

  selectedMode.addEventListener("click", () => {
    optionsContainer.classList.toggle("active");
  });

  optionsList.forEach((o) => {
    o.addEventListener("click", () => {
      let input = o.querySelector("input").id;
      selectedMode.innerHTML = o.querySelector("label").innerHTML;
      selectedMode.setAttribute("data-value", input);
      optionsContainer.classList.remove("active");
    });
  });
}

function initialize() {
  selectMode();
  creteFatuOptions()
}
initialize()
/*select 2 */

.option {
  border-radius: 8px;
}

.select-box {
  display: flex;
  width: 100%;
  max-height: 50px;
  flex-direction: column;
  position: relative;
}

.select-box .options-container {
  padding: 0;
  background: #fff;
  color: #000;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border: 1px solid #dadada;
  border-radius: 8px;
  position: absolute;
  overflow: hidden;
  order: 1;
  top: 120%;
}

.select-box .options-container::after {
  position: absolute;
  display: block;
  content: "";
  bottom: 100%;
  right: 25px;
  width: 7px;
  height: 7px;
  margin-bottom: -3px;
  border-top: 1px solid #dadada;
  border-left: 1px solid #dadada;
  background: #fff;
  transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}

.selected {
  width: 100%;
  font-size: 1rem;
  outline: none;
  border: 1px solid #dadada;
  border-radius: 5px;
  padding: 1rem 0.7rem;
  color: orange;
  transition: 0.1s ease-out;
  position: relative;
  order: 0;
}

.selected::after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 25px;
  border-bottom: 1px solid #dadada;
  border-right: 1px solid #dadada;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  padding: 10px 0;
  overflow: visible;
  z-index: 999;
}

.select-box .options-container.active+.selected::after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}

.select-box .options-container::-webkit-scrollbar {
  width: 8px;
  background: #fff;
  border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
  background: #dadada;
  border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}

.select-box label {
  cursor: pointer;
  color: orange;
}

.select-box label:hover {
  color: orange;
}

.select-box .option .radio {
  display: none;
}
<div id="service" class="custom_select flex">
  <h3 class="textfield_label">
    Selecione a categoria da sua Empresa
  </h3>
  <div class="select-box">
    <div class="options-container"></div>

    <div id="serviceMode" class="selected">
      Selecione um Tipo de Serviço
    </div>
  </div>
</div>
<div id="faturamento" class="custom_select flex">
  <h3 class="textfield_label">
    Selecione o faturamento mensal da sua Empresa
  </h3>
  <div class="select-box">
    <div class="faturamento-container options-container"></div>

    <div id="selected-faturamento" class="selected">
      Qual o faturamento mensal?
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 13 июля 2020

Я точно не знаю, что делает ваш код, но подозреваю, что эта часть: if ((item.id = 1)) { ..... Я думаю, там должно быть == вместо =. Если я его изменю, похоже, будут напечатаны правильные значения. 

const data = [{
    id: 1,
    name: "SIMPLES NACIONAL – MEI",
    funcionarioIncrease: 49.99,
    maxFuncionario: 1,
    socioIncrease: 0,
    maxSocio: 5,
    FATURAMENTO: [{
        id: 1,
        name: "ATÉ 30.000,00",
        value: 49.99,
      },
      {
        id: 2,
        name: "De 30.001,00 a 50.000,00 ",
        value: 99.99,
      },
    ],
  },
  {
    id: 2,
    name: "SIMPLES NACIONAL – SERVIÇOS",
    funcionarioIncrease: 25,
    maxFuncionario: 3,
    socioIncrease: 25,
    maxSocio: 5,
    FATURAMENTO: [{
        id: 1,
        name: "ATÉ 50.000,00",
        value: 149.99,
      },
      {
        id: 2,
        name: "De 40.001,00 a 50.000,00 ",
        value: 199.99,
      },
    ],
  },
];

function creteFatuOptions() {
  const container = document.querySelector(".faturamento-container");
  const mode = document.querySelector(".selected").getAttribute('data-value')
  console.log(mode)
  data.forEach((value) => console.log(value))
  data.map((value) => console.log(value))
  data.map((value) => {
    console.log(mode)
    console.log(value.id)
    console.log(value.name)
    console.log(value.id == mode)
  });
}

function createInput(id) {
  var inputRadio = document.createElement("input");

  if (id) {
    inputRadio.id = id;
    inputRadio.name = "category";
    inputRadio.type = "radio";
    inputRadio.value = id;
    inputRadio.classList.add("radio");
    return inputRadio;
  }
  return null;
}

function createModeOptions() {
  const container = document.querySelector(".options-container");
  data.forEach((value) => {
    const optionDiv = document.createElement("div");
    optionDiv.classList.add("option");
    container.append(optionDiv);
    const input = createInput(value.id);
    if (!input) {
      return null;
    }
    optionDiv.append(input);
    var label = document.createElement("label");
    label.htmlFor = value.id;
    label.innerHTML = value.name;
    optionDiv.append(label);
  });
}

function selectMode() {
  createModeOptions();
  const selectedMode = document.querySelector("div#serviceMode");
  const optionsContainer = document.querySelector(".options-container");
  const optionsList = document.querySelectorAll(".option");
  data.forEach((item) => {
    if ((item.id == 1)) { // <-- Change here
      selectedMode.innerHTML = item.name;
      selectedMode.setAttribute("data-value", item.id);
    }
  }), {
    once: true
  };

  selectedMode.addEventListener("click", () => {
    optionsContainer.classList.toggle("active");
  });

  optionsList.forEach((o) => {
    o.addEventListener("click", () => {
      let input = o.querySelector("input").id;
      selectedMode.innerHTML = o.querySelector("label").innerHTML;
      selectedMode.setAttribute("data-value", input);
      optionsContainer.classList.remove("active");
    });
  });
}

function initialize() {
  selectMode();
  creteFatuOptions()
}
initialize()
/*select 2 */

.option {
  border-radius: 8px;
}

.select-box {
  display: flex;
  width: 100%;
  max-height: 50px;
  flex-direction: column;
  position: relative;
}

.select-box .options-container {
  padding: 0;
  background: #fff;
  color: #000;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border: 1px solid #dadada;
  border-radius: 8px;
  position: absolute;
  overflow: hidden;
  order: 1;
  top: 120%;
}

.select-box .options-container::after {
  position: absolute;
  display: block;
  content: "";
  bottom: 100%;
  right: 25px;
  width: 7px;
  height: 7px;
  margin-bottom: -3px;
  border-top: 1px solid #dadada;
  border-left: 1px solid #dadada;
  background: #fff;
  transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}

.selected {
  width: 100%;
  font-size: 1rem;
  outline: none;
  border: 1px solid #dadada;
  border-radius: 5px;
  padding: 1rem 0.7rem;
  color: orange;
  transition: 0.1s ease-out;
  position: relative;
  order: 0;
}

.selected::after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 25px;
  border-bottom: 1px solid #dadada;
  border-right: 1px solid #dadada;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  padding: 10px 0;
  overflow: visible;
  z-index: 999;
}

.select-box .options-container.active+.selected::after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}

.select-box .options-container::-webkit-scrollbar {
  width: 8px;
  background: #fff;
  border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
  background: #dadada;
  border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}

.select-box label {
  cursor: pointer;
  color: orange;
}

.select-box label:hover {
  color: orange;
}

.select-box .option .radio {
  display: none;
}
<div id="service" class="custom_select flex">
  <h3 class="textfield_label">
    Selecione a categoria da sua Empresa
  </h3>
  <div class="select-box">
    <div class="options-container"></div>

    <div id="serviceMode" class="selected">
      Selecione um Tipo de Serviço
    </div>
  </div>
</div>
<div id="faturamento" class="custom_select flex">
  <h3 class="textfield_label">
    Selecione o faturamento mensal da sua Empresa
  </h3>
  <div class="select-box">
    <div class="faturamento-container options-container"></div>

    <div id="selected-faturamento" class="selected">
      Qual o faturamento mensal?
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...