Print the 'value' of a checkbox 'not true or false' in javascript

0

I have two checkbox of html connected to a function JavaScript , one says it has a front camera and the other one does not. It works very well, but instead of printing yes it has or not it does not have , it prints true or false , as you will see in Array in half of each cell says camara_frontal: true or false , I do not want you to say that specifically, but a string different, I'm really stuck with this.

//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 = "";

            }

        }

    }

}

And this is the div of the file html where the checkbox are. I can not make it appear instead of appearing true or false , you have or you do not have , I already tried listadoCelulares[i].camara_frontal.value and it does not go.

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

    
asked by berlot83 22.02.2017 в 20:33
source

1 answer

1

The problem is that you are reading the value contained in the file JSON (which is true or false ), not the value of checkbox . You do not need to vary almost anything, just detect if the value is true or false and shows a value or another depending on the result:

var camarafrontal = (listadoCelulares[i].camara_frontal ? "sí" : "no") + " tiene";
var displayCamaraFrontal = document.createTextNode(listadoCelulares[i].marca + " " + listadoCelulares[i].modelo + " Ca.fr: " + camarafrontal);
    
answered by 22.02.2017 / 20:49
source