javascript - 未检测到的类型错误：其他为空，这个错误到底是什么？它是如何解决的？

问题描述

我正在制作一个表格，一旦我填写了数据，我就会通过正则表达式验证它们，它们可以被发送。

我还创建了一个 JavaScript 文件，它调用 JSON 来输入一个人的婚姻状况，问题是在函数中的那个文件中，我必须能够验证、发送数据或删除或显示它，我得到了那个错误，无论你做了多少改变，它都不会停止出现。

在这里，我传递了错误和有问题的代码。

Uncaught TypeError: estado_civil.forEach is not a function

onreadystatechange file:///f:/javascript recuperacion/EJER formulario/inicia.js:13

inicia file:///f:/javascript recuperacion/EJER formulario/inicia.js:4

onload file:///f:/javascript recuperacion/EJER formulario/inicia.js:47

EventHandlerNonNull* file:///f:/javascript recuperacion/EJER formulario/inicia.js:38

function inicia() {
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myObj = eval("(" + this.responseText + ")");
      console.log(myObj);
      var objString = JSON.stringify(myObj);
      console.log(objString);

      var regiones = myObj;

      regiones.forEach(element => {

        var option = document.createElement("option");

        var txtnombremun = document.createTextNode(element.nm);
        option.appendChild(txtnombremun);
        option.setAttribute("id", element.id);
        option.setAttribute("value", element.nm);

        document.getElementById("estado_civil").appendChild(option);

      });
    } else if (this.readyState == 4 && this.status != 200) {
      document.getElementById("misdatos").innerHTML += "<h1>" + this.status + " - " + this.statusText + "</h1>"
    }
  }

  //Abrir la petición al servidor:
  xmlhttp.open("GET", "http://www.json-generator.com/api/json/get/cesjvSMlvm?indent=2", true);
  xmlhttp.send();
}

let arrayFallos = [];

// Los fallos de arriba los marca en este funcion de aqui abajo
window.onload = function() {
  
  inicia();
}

<div id="container">
  <div id="flote">
    <h1>Formulario</h1>
    <hr>
    <form id="formu" action="">
      <table>

        <tr>
          <td class='labels'><label>Nombre:</label></td>
          <td><input id="nombre" type="text" name="nombre"></td>
        </tr>
        <tr>
          <td>
            <label name="identificacion" id="identificacion"></label>
            <label value="DNI">DNI</label>
          </td>
          <td><input id="dni" name="dni" type="text"></td>
        </tr>
        <tr>
          <td class='labels'><label>Email: </label></td>
          <td><input type="text" name="email" id="email"></td>
        </tr>
        <tr>
          <td class='labels'><label>Edad: </label></td>
          <td><input type="number" name="edad" id="edad"></td>
        </tr>
        <tr>
          <td class='labels' id="etsex">Sexo:</td>
          <td><input type="radio" name="sexual" value="Mujer" id="Mujer"><label>Mujer</label></td>
        </tr>
        <tr>
          <td class='labels'><label></label></td>
          <td>
            <input type="radio" name="sexual" value="Hombre" id="Hombre"><label>Hombre</label>
          </td>
        </tr>
        <tr>
          <tr>
            <td class='labels'><label>Telefono: </label></td>
            <td><input type="text" name="tlf" id="tlf"></td>
          </tr>
          <tr>
            <tr>
              <td class='labels'><label>Estado </label></td>
              <td>
                <select name="estado_civil" id="estado_civil">
                  <option value="none"> ---- Sin seleccionar ---- </option>
                </select>
              </td>
            </tr><br>

            <tr>
              <td class='labels'><label id="seleccion">Te gusta el test</label></td>
            </tr>
            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="aficion" value="si" id="si"> Si<br>
                <input type="checkbox" name="aficion" value="no" id="no"> No<br>
                <input type="checkbox" name="aficion" value="nose/noresponde" id="nose/norespond"> nose/no respond<br>
              </td>
            </tr>
            <tr>
              <td class='labels'>Y que piensas del formulario</td>
              <td><textarea name="descripcion" id="txtdesc" cols="30" rows="7" placeholder="(min 10 caracteres, max 240 caracteres)"></textarea></td>
            </tr>
            <tr>
              <td class='labels'></td>
              <td>
                <input disabled type="button" value="Enviar" id="Enviar">
                <input type="button" value="Validar" name="validar" id="validar">
                <input type="button" value="Borrar" name="borrar" id="borrar">
                <input type="button" value="Otro" name="desplegar" id="Otro">
              </td>
            </tr>

      </table>
    </form>
  </div>
</div>

标签： javascript

解决方案

您的代码有 2 个（或者可能是 3 个）问题

不要使用evalset直接xmlhttp.responseType = "json"阅读response。
您没有读取estado_civil返回对象的属性
您尝试读取的属性在返回的对象上不存在。

我已经修复了下面我认为你打算如何工作的所有 3 个问题。

function inicia() {
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myObj = this.response;
      var regiones = myObj.estado_civil;

      regiones.forEach(element => {

        var option = document.createElement("option");

        var txtnombremun = document.createTextNode(element.estado);
        option.appendChild(txtnombremun);
        option.setAttribute("id", element.codEstado);
        option.setAttribute("value", element.estado);

        document.getElementById("estado_civil").appendChild(option);

      });
    } else if (this.readyState == 4 && this.status != 200) {
      document.getElementById("misdatos").innerHTML += "<h1>" + this.status + " - " + this.statusText + "</h1>"
    }
  }

  //Abrir la petición al servidor:
  xmlhttp.responseType = "json";
  xmlhttp.open("GET", "http://www.json-generator.com/api/json/get/cesjvSMlvm?indent=2", true);
  xmlhttp.send();
}

let arrayFallos = [];

// Los fallos de arriba los marca en este funcion de aqui abajo
window.onload = function() {
  
  inicia();
}

<div id="container">
  <div id="flote">
    <h1>Formulario</h1>
    <hr>
    <form id="formu" action="">
      <table>

        <tr>
          <td class='labels'><label>Nombre:</label></td>
          <td><input id="nombre" type="text" name="nombre"></td>
        </tr>
        <tr>
          <td>
            <label name="identificacion" id="identificacion"></label>
            <label value="DNI">DNI</label>
          </td>
          <td><input id="dni" name="dni" type="text"></td>
        </tr>
        <tr>
          <td class='labels'><label>Email: </label></td>
          <td><input type="text" name="email" id="email"></td>
        </tr>
        <tr>
          <td class='labels'><label>Edad: </label></td>
          <td><input type="number" name="edad" id="edad"></td>
        </tr>
        <tr>
          <td class='labels' id="etsex">Sexo:</td>
          <td><input type="radio" name="sexual" value="Mujer" id="Mujer"><label>Mujer</label></td>
        </tr>
        <tr>
          <td class='labels'><label></label></td>
          <td>
            <input type="radio" name="sexual" value="Hombre" id="Hombre"><label>Hombre</label>
          </td>
        </tr>
        <tr>
          <tr>
            <td class='labels'><label>Telefono: </label></td>
            <td><input type="text" name="tlf" id="tlf"></td>
          </tr>
          <tr>
            <tr>
              <td class='labels'><label>Estado </label></td>
              <td>
                <select name="estado_civil" id="estado_civil">
                  <option value="none"> ---- Sin seleccionar ---- </option>
                </select>
              </td>
            </tr><br>

            <tr>
              <td class='labels'><label id="seleccion">Te gusta el test</label></td>
            </tr>
            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="aficion" value="si" id="si"> Si<br>
                <input type="checkbox" name="aficion" value="no" id="no"> No<br>
                <input type="checkbox" name="aficion" value="nose/noresponde" id="nose/norespond"> nose/no respond<br>
              </td>
            </tr>
            <tr>
              <td class='labels'>Y que piensas del formulario</td>
              <td><textarea name="descripcion" id="txtdesc" cols="30" rows="7" placeholder="(min 10 caracteres, max 240 caracteres)"></textarea></td>
            </tr>
            <tr>
              <td class='labels'></td>
              <td>
                <input disabled type="button" value="Enviar" id="Enviar">
                <input type="button" value="Validar" name="validar" id="validar">
                <input type="button" value="Borrar" name="borrar" id="borrar">
                <input type="button" value="Otro" name="desplegar" id="Otro">
              </td>
            </tr>

      </table>
    </form>
  </div>
</div>

编辑：使用XMLHttpRequest是一种相当老式的方式来发出http请求。更现代的代码使用Fetch API

javascript - 未检测到的类型错误：其他为空，这个错误到底是什么？它是如何解决的？

问题描述

解决方案

推荐阅读