0

Tengo dos checkbox de html conectados a una función JavaScript, uno dice que tiene cámara frontal y el otro que no tiene. Funciona muy bien, pero en vez de imprime sí tiene o no no tiene, me imprime true o false, como verán en el Array en la mitad de cada celular dice camara_frontal: true o false, no quiero que diga expresamente eso, sino un string distinto, realmente estoy trabado con esto.

//Array original:
listadoCelulares = [
    {           
        "marca": "Motorola",
        "modelo": "3ra Generación",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 3,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": false,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": "si"
    },

    {
        "marca": "Motorola",
        "modelo": "2da Generación",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 2,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": false,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": "si"
    },

    {           
        "marca": "Motorola",
        "modelo": "G 4 PLAY",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 2,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {           
        "marca": "Samsung",
        "modelo": "Galaxy Note J7",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 8,
        "pantalla_resolucion": "720x1280",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {           
        "marca": "Huawei",
        "modelo": "P8",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 6,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": false,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {           
        "marca": "Huawei",
        "modelo": "Y360D",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 4,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "5 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "2 Mpx",
        "memoria_interna": "4 GB",
        "flash": false
    },

    {           
        "marca": "Sony",
        "modelo": "Xperia M2",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": false,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": false
    },

    {
        "marca": "Sony",
        "modelo": "Z3",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 7,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {
        "marca": "LG",
        "modelo": "Leon",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 4,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": false
    },

    {
        "marca": "LG",
        "modelo": "Spirit",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {
        "marca": "Sony",
        "modelo": "Z2",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {
        "marca": "Samsung",
        "modelo": "S7",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 7,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": false
    },

    {
        "marca": "Samsung",
        "modelo": "A4",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": false
    },

    {
        "marca": "Samsung",
        "modelo": "A5",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 4,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": false
    },

    {
        "marca": "Sony",
        "modelo": "Z1",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {
        "marca": "Huawei",
        "modelo": "Y570",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": false
    },

    {
        "marca": "LG",
        "modelo": "Leon 4LTE",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": false
    },

    {
        "marca": "Iphone",
        "modelo": "6ta gen",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {
        "marca": "Iphone",
        "modelo": "4S gen",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {
        "marca": "Hyundai",
        "modelo": "Next",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": false,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": false
    },

    {
        "marca": "Iphone",
        "modelo": "5S gen",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {
        "marca": "Iphone",
        "modelo": "7ma gen",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    },

    {
        "marca": "Hyundai",
        "modelo": "Extreme",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": false    
    },

    {
        "marca": "Hyundai",
        "modelo": "TimeSpace",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "800x480",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": true
    }
];

function refinarCamaraFrontal () {    

    //Función Camara frontal si    
    var camaraFrontalTrueCheckbox = document.getElementById("con"); //Elemento elegido Checkbox del html para aplicarle la condición de checkeado

    var ulElegidoCamaraFrontal= document.getElementById("resultadosCamaraFrontal"); //Ul elegido para hacer de contenedor y que aparezcan los resultados

    var refinarPorCamaraFrontal = document.getElementById("camaraFrontal");

    if (camaraFrontalTrueCheckbox.checked) { //Condición de checkeado

        //Creamos el String del título
        var tituloResultado = document.createTextNode("Resultados con Cámara:")

        pTitulo = document.createElement("p");
        pTitulo.style.fontSize = "16px";
        pTitulo.style.color = "Coral";
        pTitulo.appendChild(tituloResultado);
        ulElegidoCamaraFrontal.appendChild(pTitulo);

        for(var i = 0; i < listadoCelulares.length; i++){

            if (listadoCelulares[i].camara_frontal == true) {

            // solo si encuentra agrega
            var liCamaraFrontal = document.createElement("li");

            // Adherimos el 'li' a el 'ul' elegido  
            ulElegidoCamaraFrontal.appendChild(liCamaraFrontal);

            // Creamos un String
            var displayCamaraFrontal = document.createTextNode(listadoCelulares[i].marca + " " + listadoCelulares[i].modelo + " Ca.fr: " + listadoCelulares[i].camara_frontal);

            // Adherimos el String creado
            liCamaraFrontal.appendChild(displayCamaraFrontal);

            refinarPorCamaraFrontal.onclick = function () {

                document.getElementById("resultadosCamaraFrontal").innerHTML = "";

            }

        }

    }

}

Y este el el div del archivo html donde están los checkbox. No puedo hacer que en vez de que me aparezca true o false, me aparezca, tiene o no tiene, ya intenté listadoCelulares[i].camara_frontal.value y no va.

<div id="camaraFrontal">
    <form id="refinarCamaraFrontal" action="javascript:;" onsubmit="refinarCamaraFrontal()">
        <p>Filtrar por cámara frontal:<br></p>
        <input type="checkbox" id="con" name="con" value="con"> Con cámara Frontal<br>
        <input type="checkbox" id="sin" name="sin" value="sin"> Sin cámara Frontal<br>
        <input type="submit" value="Filtrar">
    </form>

    <p>Resultados</p>

    <ul id="resultadosCamaraFrontal"></ul>
</div>

introducir la descripción de la imagen aquí

2
  • Cómo es el código con que escribes los resultados del filtro?
    – ffflabs
    el 22 feb. 2017 a las 19:47
  • gracias por tu ayuda, acá el usuario elchininet me pasó el código exacto. gracias igualmente @amenadiel
    – berlot83
    el 22 feb. 2017 a las 21:54

1 respuesta 1

1

El problema es que estás leyendo el valor contenido en el fichero JSON (que es true o false) no el valor de los checkbox. No te hace falta variar casi nada, solo detecta si el valor es true o false y muestra un valor u otro dependiendo del resultado:

var camarafrontal = (listadoCelulares[i].camara_frontal ? "sí" : "no") + " tiene";
var displayCamaraFrontal = document.createTextNode(listadoCelulares[i].marca + " " + listadoCelulares[i].modelo + " Ca.fr: " + camarafrontal);
2
  • Que groso gracias, ayer me rompí lña cabeza todo el día y era un pava, pero no la sabía. lo googlié bastante y había info parecida pero no exactamente igual, gracias chavón.
    – berlot83
    el 22 feb. 2017 a las 21:43
  • De nada, me alegro que te haya ayudado. Un saludo ;)
    – ElChiniNet
    el 22 feb. 2017 a las 21:46

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.