Print the Javascript indexOf

Question

Print the Javascript indexOf

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (0 votes)

2

I'm trying to do a kind of filter of an array in JavaScript by means of an html checkbox, when it is checked look for the indexes that start with "Motorola", the subject is like that, find them but show them as -1 or 0, I'm stuck, I do not know how to write the condition that if the indexOf gives 0, then it only prints those that have that index.

The code I'm passing them prints in the html only 0 and -1. The same condition also makes it difficult for me, what do I do?

if(listadoCelulares[i].indexOf("Motorola")==0){
    //Algo así?? ando chueco en javascript
}

function refinarMarca(){

listadoCelulares = [
    {

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

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

        "marca": "Samsung",
        "modelo": "GALAXY J5 J510",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5.2,
        "pantalla_resolucion": "720x1280",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": "si"
    },
    {

        "marca": "Samsung",
        "modelo": "GALAXY J7 J710",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5.5,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": "si"
    },
    {

        "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": "si"
    },
    {

        "marca": "Lenovo",
        "modelo": "VIBE K5",
        "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": "si"
    }
];



function refinarMarca(){

var motorolaCheckbox= document.getElementById("motorola");

        if(motorolaCheckbox.checked){



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


            var ulElegido= document.getElementById("ListadoTotal"); 
                var liMarca= document.createElement("li");
                    ulElegido.appendChild(liMarca); 
                        var displayMarca= document.createTextNode(listadoCelulares[i].marca.indexOf("Motorola"));


                            liMarca.appendChild(displayMarca);


        }

}

}

javascript

asked by berlot83 20.02.2017 в 23:45

source

3 answers

4

Actually, the IndexOf() method returns the position of the first occurrence of a specified value in a string, but if it does not find a match then it returns -1 , which means that it does not will always return 0, for example

var str = "Hola mundo, bienvenido al universo.";
var indexOfValue = str.indexOf("universo");

In the previous example, the value of indexOfValue is 26.

Therefore, what you need to do in your for is to evaluate if the result is different from -1, in the following way:

if(listadoCelulares[i].marca.indexOf("Motorola") != -1){
     var displayMarca= document.createTextNode(listadoCelulares[i].marca);
     liMarca.appendChild(displayMarca);
 }

Here is an example (also in jsfiddle ):

listadoCelulares = [
    {

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

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

        "marca": "Samsung",
        "modelo": "GALAXY J5 J510",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5.2,
        "pantalla_resolucion": "720x1280",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": "si"
    },
    {

        "marca": "Samsung",
        "modelo": "GALAXY J7 J710",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5.5,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": "si"
    },
    {

        "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": "si"
    },
    {

        "marca": "Lenovo",
        "modelo": "VIBE K5",
        "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": "si"
    }
];

$('input[name=checkgroup]').change(function(){

    if($(this).is(':checked'))
    {
        refinarMarca();
    }
    else
    {
        // Checkbox is not checked.
    }    

});

function refinarMarca(){

var motorolaCheckbox= document.getElementById("motorola");
if(motorolaCheckbox.checked){
	for(var i=0; i<listadoCelulares.length; i++){
		var ulElegido= document.getElementById("ListadoTotal"); 
    var liMarca= document.createElement("li");
		if(listadoCelulares[i].marca.indexOf("Motorola") != -1){
			var stringData = listadoCelulares[i].marca
                        + " " + listadoCelulares[i].modelo
                        + " " + listadoCelulares[i].sistema_operativo
                        + " " + listadoCelulares[i].pantalla_pulgadas
                        + " " + listadoCelulares[i].pantalla_resolucion
                        + " " + listadoCelulares[i].camara_resolucion
                        + " " + listadoCelulares[i].camara_frontal
                        + " " + listadoCelulares[i].camara_frontal_res
                        + " " + listadoCelulares[i].memoria_interna
                        + " " + listadoCelulares[i].flash;
                        
                        
					var displayMarca= document.createTextNode(stringData);
					liMarca.appendChild(displayMarca);
          ulElegido.appendChild(liMarca); 
					}
     }
  }
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<body>
<input name="checkgroup" type="checkbox" id="motorola"> Motorola
<ul id="ListadoTotal">
</ul>
</body>

answered by 21.02.2017 в 00:35

0

Additionally you could filter your array using a function sent as a parameter to the filter ( function)

listadoCelulares = [
    {

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

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

        "marca": "Samsung",
        "modelo": "GALAXY J5 J510",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5.2,
        "pantalla_resolucion": "720x1280",
        "camara_resolucion": "13 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB",
        "flash": "si"
    }
    
];

function filtromarca(obj) {
    let valor = document.getElementById('marca').value;
 	return ('marca' in obj && obj.marca!= null && obj.marca==valor) 
}

function filtro(){
	let arr =listadoCelulares.filter(filtromarca); //Filtro
	var ulElegido= document.getElementById("ListadoTotal"); 
	ulElegido.innerHTML = ""; //Limpiar la Lista
	Object.keys(arr).forEach(function(key, index) {
  		   var liMarca= document.createElement("li");
           ulElegido.appendChild(liMarca); 
           var displayMarca = document.createTextNode(this[key].marca);//puede Acceder a cualquier clave de su array (marca ,so, etc)
           liMarca.appendChild(displayMarca);
	}, arr);
}

<input type="checkbox" id="marca" name="marca" value="Motorola" onclick="return filtro(this);">Motorola
<ul id="ListadoTotal">
		
</ul>

answered by 21.02.2017 в 00:14

Change the color of a TextView to only certain characters noo I can declare the global variable

score 3 · Accepted Answer

I guess your for should be something like this:

        var ulElegido= document.getElementById("ListadoTotal"); 

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

          if(listadoCelulares[i].marca.indexOf("Motorola")==0){ 
          // solo si encuentra agrega
           var liMarca= document.createElement("li");
           ulElegido.appendChild(liMarca); 
           var displayMarca = document.createTextNode(listadoCelulares[i].marca);
           //agrega la marca o lo que quieras
           liMarca.appendChild(displayMarca);

        }
     }

By the way, the indexOf what it does is return the index where it finds the element, so as always you are putting the mark as the first item (position 0) if it finds it will return 0, and when it does not find it returns -1.