How to use a two-dimensional Array with Javascript (jquery)?

Navigation
1

I think my question is too shallow, but I explain the situation in more detail:

I already have the code and it works partially follows; 

$(document).ready(function() {
    var url = "dominio.com/json.php";
    $.getJSON(url, function(result) {
        console.log(result);
        $.each(result, function(i, field) {

            var id_rotina = field.id_rotina;
            var treino = field.treino;
            var grupo_id = field.grupo_id;
            var user_id = field.user_id;

            var id_grupo = field.id_grupo;
            var nome_grupo = field.nome_grupo;
            var anatomia = field.anatomia;

            var id_exercicio = field.id_exercicio;
            var nome_exercicio = field.nome_exercicio;
            var repeticoes = field.repeticoes;
            var intervalo = field.intervalo;

            if(treino == 'treino-b'){
                $("#grupo-b").append(
                "<div class='serie'> <div class='mostra-grupo-b'>"
                + nome_grupo
                + "<div class='visualizar'>VER</div>" 
                + "</div>"
                + "<div class='anatomia'>" + anatomia + "</div>"
                + "<table class='grupo-b' align='center'><thead><td class='exe'>Exercício</td><td>Reps</td><td>Int</td></thead><tbody>"
                + "<td>"+ nome_exercicio +"</td>"
                + "<td>"+ repeticoes +"</td>"
                + "<td>"+ intervalo +"</td>"
                + "</tbody></table></div>");
            }
        });
    });
});

It prints correctly when it has only one element to print when it has more than one it duplicates the variable 'group_name' and table.

My question really is: How do I display the variables correctly?

    
asked by anonymous 05.05.2017 / 05:22

3 answers

0

If I see correctly, you want to combine the results by grouping them with nome_grupo .

Example with your JSON: 

var result = [{
  "id_rotina": "7",
  "treino": "treino-b",
  "grupo_id": "2",
  "user_id": "1",
  "id_grupo": "2",
  "nome_grupo": "Ombro",
  "anatomia": "\"Ombros\"",
  "id_serie": "1",
  "rotina_id": "7",
  "exercicio_id": "5",
  "repeticoes": "3 X 10",
  "intervalo": "1 Min",
  "id_exercicio": "5",
  "nome_exercicio": "Elevacao Lateral Com Halteres"
}, {
  "id_rotina": "7",
  "treino": "treino-b",
  "grupo_id": "2",
  "user_id": "1",
  "id_grupo": "2",
  "nome_grupo": "Ombro",
  "anatomia": "\"Ombros\"",
  "id_serie": "2",
  "rotina_id": "7",
  "exercicio_id": "4",
  "repeticoes": "4 X 8",
  "intervalo": "45 Seg",
  "id_exercicio": "4",
  "nome_exercicio": "Desenvolvimento Por Frente Com Barra"
}, {
  "id_rotina": "8",
  "treino": "treino-b",
  "grupo_id": "1",
  "user_id": "1",
  "id_grupo": "1",
  "nome_grupo": "Trapezio",
  "anatomia": "trapezio",
  "id_serie": "3",
  "rotina_id": "8",
  "exercicio_id": "7",
  "repeticoes": "3 X 12",
  "intervalo": "45 seg",
  "id_exercicio": "7",
  "nome_exercicio": "Remada Alta Com Barra"
}];


$(document).ready(function() {
  var url = "dominio.com/json.php";
  //  $.getJSON(url, function(result) {
  //    console.log(result);
  var $grupo = $("#grupo-b");
  var grupos = {};


  $.each(result, function(i, field) {
    var id_rotina = field.id_rotina;
    var treino = field.treino;
    var grupo_id = field.grupo_id;
    var user_id = field.user_id;

    var id_grupo = field.id_grupo;
    var nome_grupo = field.nome_grupo;
    var anatomia = field.anatomia;

    var id_exercicio = field.id_exercicio;
    var nome_exercicio = field.nome_exercicio;
    var repeticoes = field.repeticoes;
    var intervalo = field.intervalo;
    var tabela = "<table class='grupo-b' align='center'><thead><td class='exe'>Exercício</td><td>Reps</td><td>Int</td></thead><tbody>" +
      "<td>" + nome_exercicio + "</td>" +
      "<td>" + repeticoes + "</td>" +
      "<td>" + intervalo + "</td>" +
      "</tbody></table>";
    if (!grupos[nome_grupo]) {
      grupos[nome_grupo] = ["<div class='serie'> <div class='mostra-grupo-b'>" +
        nome_grupo +
        "<div class='visualizar'>VER</div>" +
        "</div>" +
        "<div class='anatomia'>" + anatomia + "</div>", tabela, "</div>"
      ];
    } else {
      grupos[nome_grupo].splice(-1, 0, tabela);
    }
  });
  var html = Object.keys(grupos).reduce(function(str, nome) {
    return str += grupos[nome].join('');
  }, '');
  $grupo.html(html);
  //  });
});
table {
  width: 100%;
  border: 1px solid black;
}

div {
  display: inline-block;
  margin:10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="grupo-b"></div>
    
05.05.2017 / 11:44
0

You are re-creating the div with the class and you are not checking if it already exists. 

var divNomeGrupo =$('div:contains(nome_grupo)');

if (divNomeGrupo){
    divNomeGrupo.parent().append( conteúdo );
} else { 
#executa o código normalmente
  }
    
05.05.2017 / 06:56
0

Once again the friend Sergio saving the day .. this is the code that answered me, with the appropriate modifications (I decided to change it in case someone else needs the same solution): 

$(document).ready(function() {
    var url = "http://dominio.com/json.php";
    $.getJSON(url, function(result) {
        console.log(result);
        var $grupo = $("#grupo-b");
        var grupos = {};
            $.each(result, function(i, field) {
                var treino = field.treino;
                var nome_grupo = field.nome_grupo;
                var anatomia = field.anatomia;
                var nome_exercicio = field.nome_exercicio;
                var repeticoes = field.repeticoes;
                var intervalo = field.intervalo;

                var tabela = "<table class='grupo-b' align='center'><tbody>" +
                "<td class='exe'>" + nome_exercicio + "</td>" +
                "<td class='reps'>" + repeticoes + "</td>" +
                "<td class='int'>" + intervalo + "</td>" +
                "</tbody></table>";
                if (!grupos[nome_grupo]) {
                  grupos[nome_grupo] = ["<div class='serie'> <div class='mostra-grupo-b'>" +
                    nome_grupo +
                    "<div class='visualizar'>VER</div>" +
                    "</div>" +
                    "<table class='grupo-b' align='center'><thead><td class='exe'>Exercício</td><td class='reps'>Reps</td><td class='int'>Int</td></thead></table>"+
                    "<div class='anatomia'>" + anatomia + "</div>", tabela, "</div>"
                  ];
                }else{
                    grupos[nome_grupo].splice(-1, 0, tabela);
                }
            });
        var html = Object.keys(grupos).reduce(function(str, nome) {
            return str += grupos[nome].join('');
        }, '');
    $grupo.html(html);
    });
});
    
05.05.2017 / 13:06
TCP / IP communication with printer Markem9030 Yii2 error. Unknown Property - yii \ base \ UnknownPropertyException [closed]