數組 object.map 和 forEach

Question

您好我在映射或滾動對象數組時遇到問題我在每個 object 中都有一個 id：

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))
}

但由於某種原因，我對每個 object 的 id 始終為 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, …}

我不知道為什么，但我所有對象的 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)) { 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>

Answer 1

我不完全知道你的代碼做了什么，但我懷疑這部分： 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>