Dúvida com listas Mustache

[vinitf 0]

Olá, tenho uma lista de 3 locais e suas respectivas situações. Em rows bootstrap vão mostrar, em sequência, todos os pontos, os pontos localizados e os não localizados. Nesses dois últimos, caso não haja localizados ou não localizados, deve aparecer que todos não foram localizados ou foram, respectivamente. A primeira tabela foi feita normalmente com Mustache. As duas seguintes estou tendo problemas, pq foi exigido que eu criasse duas novas listas (uma para os pontos localizados, outra para os não) e, filtrando os dados da primeira lista para essas duas novas, esses dados iriam para as outras tabelas com Mustache. A ideia é filtrar os dados por meio do status de localização.

<div id="output">
</div>
<div id="gerar"><//div>
  <div class="container">
    <br>
    <div class="row" id="arrays">
      <script type="text/html" id="template">
        <div id="col-sm-4" style="background-color:#EEE8AA;">
          <b> Todos os serviços</div> </b>
          <p> {{#informacoes}}{{Nome}} {{/informacoes}} </p>

<!-- O que preciso alterar aqui?
          <div id="col-sm-4" style="background-color:#8FBC8F;">
            <b>Serviços online</div></b>
            <p> {{#lista[i]}}{{#Status}}{{Nome}}{{/Status}} {{/lista[i]}}
              <!-- Para mostrar que não tem serviços online-->
              {{^informacoes}}NENHUM PONTO LOCALIZADO!{{/informacoes}}</p>

            <div id="col-sm-4" style="background-color:#87CEEB;">
              <b>Serviços offline </div></b>
              <p> {{#lista[j]}}{{^Status}}{{Nome}} {{/Status}}{{/ lista[j]}}
                <!-- Para mostrar que não tem serviços online-->
                {{^informacoes}}TODOS LOCALIZADOS!{{/informacoes}}</p> -->
            </div>
      </script>

$(document).ready(function() {
  var output = $("#output");
  var template = $("#template").html();

  var pontos = {
    informacoes: [{
      "Nome": "Ponto1",
      "Localizado": false
    }, {
      "Nome": "Ponto2",
      "Localizado": true
    }, {
      "Nome": "Ponto3",
      "Localizado": true
    }]
  };

function filtrararrays( data, status) {
  var lista = [];
  var max = data.length;
  var container = document.getElementById("arrays");
  for (var i = 0; i < max; i++) {
      for (var j = 0; j < max; j++) {
  if (data[i].Status === status) {
    lista[i] = data[i];
  }else{
    lista[i] === lista[j];    
     //  container.innerHTML += X;
      }
      }return lista;
  }
document.getElementById("gerar").addEventListener(filtrarrays);
}
  html = Mustache.render(template, pontos);
  output.append(html);
});
filtrararrays ();

 

[gabrieldarezzo 255]

Independente do mustache.

Veja se ajuda:

 

[vinitf 0]

Eu entendi, deixou mais claro mas continua dando o mesmo resultado

 

[gabrieldarezzo 255]

 

Ué no topico explica como 'clonar' um array.

 

 

Ai só usar a mesma lógica do exemplo ....

Ficando algo +/- assim

var dados = {
    informacoes: [{
      "Nome": "Ponto1",
      "Localizado": false
    }, {
      "Nome": "Ponto2",
      "Localizado": true
    }, {
      "Nome": "Ponto3",
      "Localizado": true
    }]

};
var listaInformacoes = dados.informacoes.slice();

var listaInformacoesLocalizadas = [];
var listaInformacoesNaoLocalizadas = [];

for(x in listaInformacoes){
	if(listaInformacoes[x]['Localizado']){
		listaInformacoesLocalizadas.push(listaInformacoes[x]);			
	} else{
		listaInformacoesNaoLocalizadas.push(listaInformacoes[x]);		
	}
}

console.log('listaInformacoesLocalizadas ->', listaInformacoesLocalizadas);
console.log('listaInformacoesNaoLocalizadas ->', listaInformacoesNaoLocalizadas);

 

 

console.log() só é exibido  na opção de devtools:

Para abrir o mesmo 

No Chrome:

Ctrl + Shift + J

 

No Mozilla:

Ctrl + Shift + K

[vinitf 0]

Ótimo, valeu cara

[vinitf 0]

Pintou outra dúvida, tenho que apresentar três métodos diferentes para apresentar os status, e o terceiro consiste em filtrar usando dois parâmetros dentro de uma função, mas tá dando errado

/*método 1
  var informacoeslocalizadas = _.filter(dados, function(item) {
     return item.Localizado === true;
   });
   
   var informacoesnaolocalizadas = _.filter(dados, function(item) {
     return item.Localizado === false;
   }); */
   
  /* método 2
  var todosOsPontos = dados;
   var informacoeslocalizadas = filtrar(dados, true)
   var informacoesnaolocalizadas = filtrar(dados, false)*/
  
/* método 3
var informacoeslocalizadas = filtrar(dados, function(data, item){
    if (item.Localizado === data) {
      informacoeslocalizadas.push(data);
      return informacoeslocalizadas === true;
    } 
   });
  
var informacoesnaolocalizadas = filtrar(function(data, item){
    if (item.Localizado === false) {
      informacoesnaolocalizadas.push(data);
    } return offline;
   });*/

  var todosOsPontos = dados;
  var informacoes = {
    informacoes: todosOsPontos,
    informacoeslocalizadas:localizado ,
    informacoesnaolocalizadas: naolocalizado 
  };

  var html = Mustache.render(template, informacoes);
  output.append(html);
});

 

[gabrieldarezzo 255]

cria um topico novo.

E não entendi ainda oq você pretende fazer, a estrutura de dados continua a mesma do exemplo anterior.

 

Ps: qlq post abaixo vou ignorar 

[vinitf 0]

15 horas atrás, gabrieldarezzo disse:

cria um topico novo.

E não entendi ainda oq você pretende fazer, a estrutura de dados continua a mesma do exemplo anterior.

 

Ps: qlq post abaixo vou ignorar 

criado