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

Asked

Viewed 292 times

1

I believe my question has become too superficial, 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 only has one element to print when it has more than one it duplicates the variable 'groupname' and table.

my question really is: How do I show on the screen the variables correctly ?

php javascript mysql json

3 answers

0

You are re-creating the div with the serie class and 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
  }

  • in this case the group name does not repeat what repeats is thead where it has (Reps) and (Int) .. I would like to know if this code as it is is possible to dynamically display the group name and assign to this group name dynamically the (exercise name) etc without repeating thead only when necessary in case of displaying a (group name) different .. (with the appropriate changes of course). Thank you for responding..

0


If I understand correctly you want to combine the results by grouping them together 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>
<div id="grupo-b"></div>

0

once again friend Sergio saving the day .. this is the code that served me, with the appropriate modifications (I decided to change if 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);
    });
});

Browser other questions tagged php javascript mysql json

You are not signed in. Login or sign up in order to post.