0

Tengo este codigo:

const oppoStatus = [
  {
    K_OPPO_STATUS: 1,
    STATUS: "1. Initial Contact",
    SUCCESS: 0,
  },
  {
    K_OPPO_STATUS: 2,
    STATUS: "2. Demonstration",
    SUCCESS: 25,
  },
];

Necesito mostrar el siguien mensaje en formato JSON una vez hago el submit del form:

{"status": 2, "success":25}

Status, success y el valor de success logre conseguirlo, aunque no se si es correcto como lo he hecho.(Codigo abajo)

Pero se me esta complicando sacar el valor de status. He tratado con split(" ") pero luego no se como imprimir el valor que corresponde.

let output = document.querySelector(".output");
let button = document.querySelector("button");

let jsonArray = []

function renderingContent() {
  for (let i = 0; i < oppoStatus.length; i++) {
    let keyValueOppoStatus = oppoStatus[i];
    

    let entries = Object.entries(keyValueOppoStatus);
    
    let statusKey = entries[1][0];
    let statusValue = entries[1][1]
    let successKey = entries[2][0];
    let successValue = entries[2][1];
    let statusValueIndex = statusValue.split(" ")[0];
    console.log(statusValueIndex)

    jsonArray.push(JSON.stringify(statusKey))
    jsonArray.push(JSON.stringify(successKey))
    jsonArray.push(JSON.stringify(statusValueIndex))
   
    let opt = document.createElement("option");
    select.appendChild(opt);
    opt.value = successValue;
    opt.innerHTML = statusValue;
  }


  let statusKeyJson = jsonArray[0]
  let successKeyJson = jsonArray[1]


  select.addEventListener("change", function (e) {
    e.preventDefault;
    let optValue = select.value;
    input.value = optValue;
});

  button.addEventListener("click", function (e) {
    e.preventDefault();
    output.textContent =`{${statusKeyJson} ,${successKeyJson}:${select.value}}`;
  });
}
renderingContent();

1 respuesta 1

1

Prueba modificando esto:

output.textContent =`{${statusKeyJson} ,${successKeyJson}:${select.value}}`;

por esto:

let statusValueIndex = select.options[select.selectedIndex].text.split(".")[0];
output.textContent =`{${statusKeyJson}:${statusValueIndex} ,${successKeyJson}:${select.value}}`;

donde:

  • select.options nos apunta al array de las opciones del objeto select definido antes
  • select.selectedIndex nos devuelve el número de índice de la opción seleccionada
  • text nos devuelve el texto de esa opción
  • split(".")[0] nos parte ese texto en el punto . y nos quedamos con el primer valor gracias al número de indice del array creado, que en este caso nos interesa y que es [0], correspondiente al número que aparece antes del punto.

Y después tan solo hemos de agregar esa variable al output.textContent:

output.textContent =`{${statusKeyJson}:${statusValueIndex} ,${successKeyJson}:${select.value}}`;

Aquí dejo un snippet funcional más completo (basado en mi respuesta de la anterior pregunta que hicistes antes... aquí he tenido que agregar el let select = document.querySelector("select"); que te lo habias dejado conjuntamente con el html):

const oppoStatus = [
  {
    K_OPPO_STATUS: 1,
    STATUS: "1. Initial Contact",
    SUCCESS: 0,
  },
  {
    K_OPPO_STATUS: 2,
    STATUS: "2. Demonstration",
    SUCCESS: 25,
  },
];
let select = document.querySelector("select");
let input = document.querySelector("input");
let output = document.querySelector(".output");
let button = document.querySelector("button");

let jsonArray = []

function renderingContent() {
  for (let i = 0; i < oppoStatus.length; i++) {
    let keyValueOppoStatus = oppoStatus[i];
    

    let entries = Object.entries(keyValueOppoStatus);
    
    let statusKey = entries[1][0];
    let statusValue = entries[1][1]
    let successKey = entries[2][0];
    let successValue = entries[2][1];
    let statusValueIndex = statusValue.split(" ")[0];
    console.log(statusValueIndex)

    jsonArray.push(JSON.stringify(statusKey))
    jsonArray.push(JSON.stringify(successKey))
    jsonArray.push(JSON.stringify(statusValueIndex))
   
    let opt = document.createElement("option");
    select.appendChild(opt);
    opt.value = successValue;
    opt.innerHTML = statusValue;
  }


  let statusKeyJson = jsonArray[0]
  let successKeyJson = jsonArray[1]


  select.addEventListener("change", function (e) {
    e.preventDefault;
    let optValue = select.value;
    input.value = optValue;
});

  button.addEventListener("click", function (e) {
    e.preventDefault();
    let statusValueIndex = select.options[select.selectedIndex].text.split(".")[0];
    output.textContent =`{${statusKeyJson}:${statusValueIndex} ,${successKeyJson}:${select.value}}`;  });
}
renderingContent();
<body>
  <form>
    <select name="status"></select>
    <input name="success" type="number" min=0 max=100 step=1 value="0">
    <button type="button">Submit</button>
  </form>
  <div class="output">Waiting for form submit...</div>
  <script src="./index.js"></script>
</body>

1
  • Gracias nuevamanete @masterguru... Estoy haciendo console.log para seguir entendiendo un poco mas acerca de las opciones del objeto select.
    – Marina.eq
    el 3 may. 2022 a las 15:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.