Блог

У меня есть файл json, который я хочу добавить в код с помощью ajax. Но я не могу заставить его работать. Я мало что знаю об ajax и jQuery.

В файле json есть массив, который я хочу использовать в разных частях кода js. Кроме того, я создал переменную для выделения и использования файла json из ajax, но я не знаю, как использовать ее в остальной части кода, чтобы получить данные внутри.

Ниже приведен ajax, с которым у меня возникли проблемы.

Это JavaScript

 function Guardar() {
    datosJSON.nombre = document.getElementById('nombre').value;
    datosJSON.edad = document.getElementById('edad').value;
    datosJSON.email = document.getElementById('email').value;
    datosJSON.telefono = document.getElementById('telefono').value;
    localStorage.setItem('datosSolictante', JSON.stringify(datosJSON));
} // Cierre funcion guardar


function checkData() {
    console.log(todaInfo);
    console.log(((nombre.value) amp;amp; (edad.value) amp;amp; (email.value) amp;amp; (telefono.value)));
    if ((nombre.value) amp;amp; (edad.value) amp;amp; (email.value) amp;amp; (telefono.value)) {
    console.log(todaInfo);
    todaInfo.innerHTML = ` ${nombre.value} ${edad.value} ${email.value} ${telefono.value}  `;
}} // Cierre funcion checkData


window.onload = function() {
    let todaInfo = document.getElementById('todaInfo');
    let info = document.getElementById('info');
    console.log(todaInfo);
    console.log(info);
    todaInfo.innerHTML = '';
    var guardado = document.getElementById('guardado');
    guardado.addEventListener("click", function () {
    if (checkData) {
        guardado.innerHTML = "Guardado";
    }
});
};

guardado.addEventListener("click", function() {
    if ((nombre.value.length > 0) amp;amp; (edad.value.length > 0) amp;amp; (email.value.length > 0) amp;amp; (telefono.value.length > 0)) {
        info.innerHTML  = "<th>Informacion del cliente</th><tr><td>Nombre: "   nombre.value   "</tr></td><tr><td>Edad: "   edad.value   "</tr></td><tr><td>Email: "   email.value   "</tr></td><tr><td>Telefono: "   telefono.value   "</td></tr>"; 
    }
    nombre.value = "";
    edad.value = "";
    email.value = "";
    telefono.value = "";
});



var archivoAjax = $.ajax();
  
$.ajax({
      url: 'autos.JSON',
      dataType: 'json',
      success: function (data, status, jqXHR) {
        console.log(data);        
        },
        error: function (jqXHR, status, error) {
          console.log(jqXHR),
          console.log(`Error -> Status: ${status} - Error: ${error}`);
        }  
    });


// Constructor
class Seguro {
    constructor(marca, modelo, year, tipo, precio) {
      this.marca = marca;
      this.modelo = modelo;
      this.year = year;
      this.tipo = tipo;
      this.precio = precio;
    }
  
    // Realiza la cotización con los datos
    cotizarSeguro() {
      const base = 1000;
      let poliza = ((this.precio * 0.05) / 12);
  
      if (poliza < 1000) {
        poliza  = base;
      }
      // Leer el año
      const diferencia = new Date().getFullYear() - this.year;
  
      // Cada año que la diferencia es mayor, el costo va a reducirse un 3%
      poliza -= ((diferencia * 3) * poliza) / 100;
  
      //Si el seguro es completo se multiplica por un 30% más
      if (this.tipo === 'terceros-ampliada') {
        poliza *= 1.30;
      } else if (this.tipo === 'todo-riesgo') {
        poliza *= 1.45;
      }
  
      return poliza;
    }
  }
  
  window.onload = () => {
    //Selecciono los select de Marca y Modelo
    const selectMarca = document.querySelector('#marca');
    const selectModel = document.querySelector('#modelo');
  
    //Selecciono el formulario
    const formulario = document.querySelector('#cotizar-seguro');
  
    //Manejador de evento "submit" del formulario
    formulario.addEventListener('submit', cotizarSeguro);
  
    //Llamo función lista select para armar un arreglo con las distintas marcas
    const marcas = listaSelect(archivoAjax, "marca");
  
    //Cargo las marcas en el Select
    cargarContenido(marcas, selectMarca);
  
    //Cargar fechas
    llenarFecha();
  
    //Manejador de evento "change" del select de marca (Cuando el usuario selecciona una marca)
    selectMarca.addEventListener('change', (e) => {
      //Borro el contenido del select de Modelo
      selectModel.innerHTML = '<option value=""> Seleccionar </option>';
  
      //Filtro el arreglo de autos y me quedo con los que tienen la marca seleccionada
      const modelos = archivoAjax.filter(elem => elem.marca.toLowerCase().replace(' ', '-') == e.target.value);
  
      //Llamo función lista select para armar un arreglo con los distintos modelos
      const listaModelos = listaSelect(modelos, "modelo");
  
      //Cargo los modelos en el select de modelos
      cargarContenido(listaModelos, selectModel);
    });
  } // Cierre de windows.onload
  
  //Función para generar y cargar en el select de Año los distintos años
  function llenarFecha() {
    const max = new Date().getFullYear(),
      min = max - 70;
  
    const selectYear = document.querySelector('#year');
  
    for (let i = max; i > min; i--) {
      let option = document.createElement('option');
      option.value = i;
      option.textContent = i;
      selectYear.appendChild(option);
    }
  } // Cierre funcion llenarFecha
  
  // Cargo contenido en los Select
  function cargarContenido(array, select) {
    array.forEach(element => {
      let option = document.createElement('option');
      option.value = element.toLowerCase().replace(' ', '-');
      option.textContent = element;
      select.appendChild(option);
    })
  } // Cierre funcion cargarContenido
  
  
  // Genero listado (arreglo) para los select
  function listaSelect(array, key) {
    const listado = [];
  
    array.forEach(elem => {
      if (!listado.includes(elem[key])) {
        listado.push(elem[key]);
      }
    })
    return listado.sort();
  } // Cierre funcion listaSelect
  
  //Función manejadora para el evento "submit" del formulario
  function cotizarSeguro(e) {
    e.preventDefault();
  
    // Leer la marca seleccionada
    const marca = document.querySelector('#marca').value;
  
    // Leer la marca seleccionada
    const modelo = document.querySelector('#modelo').value;
  
    // Leer el año seleccionado
    const year = document.querySelector('#year').value;
  
    // Leer el tipo de cobertura
    const tipo = document.querySelector('input[name="tipo"]:checked').value;
  
    //Verifico que no haya campos vacíos
    if (marca === '' || modelo === '' || year === '' || tipo === '') {
      mostrarMensaje('Todos los campos son obligatorios', 'error');
      return;
    }
  
    mostrarMensaje('Cotizando...', 'exito');
  
    // Ocultar las cotizaciones previas 
    const resultados = document.querySelector('#resultado div');
    if (resultados != null) {
      resultados.remove();
    }
  
    //Busco el precio del modelo seleccionado
    price = archivoAjax.find(elem => (elem.marca.toLowerCase().replace(' ', '-') == marca.toLowerCase() amp;amp; elem.modelo.toLowerCase().replace(' ', '-') == modelo.toLowerCase()));
  
    // Instanciar el seguro
    const seguro = new Seguro(marca, modelo, year, tipo, price.precio);
  
    //Llamo al método cotizarSeguro de la clase Seguro
    const valorPoliza = seguro.cotizarSeguro();
  
    // Muestro resultado de la cotización
    mostrarResultado(valorPoliza, seguro);
  } // Cierre funcion cotizarSeguro
  
  //Función para mostrar un mensaje
  function mostrarMensaje(mensaje, tipo) {
    //Creo un div para mostrar el mensaje
    const div = document.createElement('div');
  
    if (tipo === 'error') {
      div.classList.add('error');
    } else {
      div.classList.add('correcto');
    }
  
    //Agrego clases y contenido al div
    div.classList.add('mensaje', 'mt-10');
    div.textContent = mensaje;
  
    // Insertar en el HTML
    const formulario = document.querySelector('#cotizar-seguro');
    formulario.insertBefore(div, document.querySelector('#resultado'));
  
    //Mantener el mensaje por 2 segundos y después borrarlo
    setTimeout(() => {
      div.remove();
    }, 2000);
  } // Cierre funcion mostrarMensaje
  


  //Función para mostrar el resultado del cálculo de la póliza
  function mostrarResultado(valorPoliza, seguro) {
  
    //Destructuring del objeto seguro
    let {marca, modelo, year, tipo, precio } = seguro;
  
    //Configuro un formateador para la poliza y otro para el precio del auto
    const options1 = { style: 'currency', currency: 'ARS', minimumFractionDigits: 0 };
    const options2 = { style: 'currency', currency: 'ARS', minimumFractionDigits: 2 };
    const formatoPrecio = new Intl.NumberFormat('es-AR', options1);
    const formatoPoliza = new Intl.NumberFormat('es-AR', options2);
  
    // Creo div para mostrar resultado
    const div = document.createElement('div');
    div.classList.add('mt-10');
  
    div.innerHTML = `
      <p class="header">Resumen de Cotización para ${datosJSON.nombre}</p>
      <p class="font-italic">Marca: ${marca.toUpperCase().replace('-', ' ')} </p>
      <p class="font-italic">Modelo: ${modelo.toUpperCase().replace('-', ' ')}  </p>
      <p class="font-italic">Año: ${year} </p>
      <p class="font-italic">Suma Asegurada: ${formatoPrecio.format(precio)}  </p>
      <p class="font-italic">Tipo de Cobertura: ${tipo.toUpperCase().replace('-', ' ')}  </p>
      <p class="font-italic">Suma Asegurada: ${formatoPoliza.format(valorPoliza)}  </p>
      `;
  
    //Selecciono el div "#resultado" donde voy a insertar la información
    const resultadoPoliza = document.querySelector('#resultado');
  
    // Mostrar el spinner
    const spinner = document.querySelector('#cargando');
    spinner.style.display = 'block';
  
    setTimeout(() => {
      //Luego de 2 segundos quito el spinner y muestro los resultados
      spinner.style.display = 'none';
      resultadoPoliza.appendChild(div);
    }, 2000);
  } // Cierre funcion mostrarResultado
  

Я не знаю, как получить доступ к этим данным: я пробовал archivoAjax.success или archivoData.ajax и т. Д., Но это не работает.

Массив файла json — это что-то вроде этого:

 [{"marca":"Toyota","modelo":"RAV4","precio":709892},
{"marca":"Mitsubishi","modelo":"Endeavor","precio":606888},
{"marca":"Honda","modelo":"Accord","precio":498929},]
  

Это HTML

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cotizador de Seguros</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="Style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>    <!-- <script defer src="autos.js"></script> -->
    <script defer src="variables.js"></script>    
    <script defer src="cotizadordeauto.js"></script>
</head>
<body>
  <div class="topnav">
        <!-- <a class="active" href="#home">Home</a> -->
      <h1>Seguros Sunshine</h1>       
  </div>
  <div>
    <h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
    <p id="intro">Contamos con tres diferentes productos para satisfacer tus necesidades. Seguros contra Terceros, que cubre aquellas terceras personas involucradas en cualquier accidente. A su vez contamos con una oferta un poco mas ampliada con la opcion Terceros Ampliada, que incluye granizo o robo q hayas sufrido. Por ultimo tenemos un seguro contra todo riesgo llamado Riesgo Total donde te garantiza la total cobertura de tu vehiculo. A continuacion los podes ver con mas detalle.</p>
    <div>
      <table class="table table-bordered table-info" id="productos">
        <thead>
          <tr>
            <th scope="col">Tipo de Seguro</th>
            <th scope="col">Responsabilidad civil</th>
            <th scope="col">asistencia en ruta</th>
            <th scope="col">Granizo</th>
            <th scope="col">Robo</th>
            <th scope="col">Incendio</th>
            <th scope="col">Remolque ilimitado</th>
            <th scope="col">Vehiculo de sustitucion</th>
            <th scope="col">Daños propios</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Terceros</th>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Terceros Ampliada</th>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Todo Riesgo</th>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
            <td>amp;#10003</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <p id="todaInfo"></p>
  <div class="container" id="preguntas">        
      <br>
      <br>
      <h3>Ingresa tus datos para iniciar una cotizacion</h3>
      <table class="table table-striped">    
      <thead>
          <input type="text" id="nombre" class="no-outline" placeholder="Nombre">
          <input type="number" id="edad" class="no-outline" placeholder="Edad">
          <input type="email" id="email" class="no-outline" placeholder="Email">
          <input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
          <div>
            <button onclick="Guardar()" id="guardado">Guardar</button>
          </div>
      </thead>
      <tbody id="info" class="shadow">          
      </tbody>
      </table>
  </div>
  <br> 
  <div class="container shadow col-lg-6">
      <div id="contenido" class="pb-auto" style="display: block">
        <header class="p-3 bg-info text-white text-uppercase rounded">
          <h1 class="text-center">Cotiza tu auto aqui</h1>
        </header>
        <form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
          <div class="d-flex align-items-center mb-5">
            <label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
            <select class="d-flex mt-2 p-3 rounded" id="marca">
              <option value="" disabled selected> Seleccionar </option>
            </select>
            <label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
            <select class="d-flex mt-2 p-3 rounded" id="modelo">
              <option value="" disabled selected> Seleccionar </option>
            </select>
          </div>
          <div class="d-flex justify-content-around align-items-center mb-5">
            <label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
            <select class="d-flex p-3 rounded" id="year">
              <option value="" disabled selected> Seleccionar </option>
            </select>
            <label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
            <input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
          </div>
          <fieldset>
            <legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>    
            <div class="d-flex justify-content-around mt-5">
              <div>
                <label class="font-weight-bold text-uppercase mr-2">Terceros</label>
                <input type="radio" name="tipo" value="terceros" checked>
                </label>
              </div>
              <div>
                <label class="font-weight-bold  text-uppercase mr-2">Terceros Ampliada</label>
                <input type="radio" name="tipo" value="terceros-ampliada">
                </label>
              </div>
              <div>
                <label class="font-weight-bold  text-uppercase mr-2">Todo Riesgo</label>
                <input type="radio" name="tipo" value="todo-riesgo">
                </label>
              </div>
            </div>
          </fieldset>
    
          <div id="cargando" style="display: none">
            <div class="spinner">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
            </div>
          </div>
          <div id="resultado"></div>
          <div class="d-flex justify-content-center py-4">
            <button type="submit"
                class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
            </button>
          </div>
    
        </form>
      </div>
    </div>
     <!--Cierre del form y container-->
    <br>
  
  <!-- <div class="d-flex">
    <footer class="page-footer">
      <div class="text-center">© 2020 Copyright Seguros Sunshine</div>      
    </footer>
  </div> -->
</body>
</html>
  

Я нашел решение, я поместил функцию ajax в windows.onload, и она работает.

 window.onload = () => {
    $.ajax({
      url: 'autos.JSON',
      dataType: 'json',
      success: function (data, status, jqXHR) {
        console.log(data);  
            //Selecciono los select de Marca y Modelo
    const selectMarca = document.querySelector('#marca');
    const selectModel = document.querySelector('#modelo');
  
    //Selecciono el formulario
    const formulario = document.querySelector('#cotizar-seguro');
  
    //Manejador de evento "submit" del formulario
    formulario.addEventListener('submit', cotizarSeguro);
  
    //Llamo función lista select para armar un arreglo con las distintas marcas
    const marcas = listaSelect(data, "marca");
  .......