Creation of Table of Games

Asked

Viewed 235 times

5

I wrote this code to organize the teams that will face each other in the Cup:

<script>
var dados = {
    "grupo1" : [
        {"selecao" : [{"nome":"brasil"},{"resultado" : [{"a":0},{"a":4},{"a":2}]}]},
        {"selecao" : [{"nome":"croacia"},{"resultado" : [{"a":0},{"a":4},{"a":2}]}]},
        {"selecao" : [{"nome":"camaroes"},{"resultado" : [{"a":0},{"a":4},{"a":2}]}]},
        {"selecao" : [{"nome":"mexico"},{"resultado" : [{"a":0},{"a":4},{"a":2}]}]}
    ],
};

var jsonData = eval(dados);

alert(jsonData.grupo1[0].selecao[0].nome);

document.write(jsonData.grupo1[0].selecao[0].nome+" x "+jsonData.grupo1[1].selecao[0].nome+"<br />");
document.write(jsonData.grupo1[3].selecao[0].nome+" x "+jsonData.grupo1[2].selecao[0].nome+"<br />");
document.write(jsonData.grupo1[0].selecao[0].nome+" x "+jsonData.grupo1[3].selecao[0].nome+"<br />");
document.write(jsonData.grupo1[2].selecao[0].nome+" x "+jsonData.grupo1[1].selecao[0].nome+"<br />");
document.write(jsonData.grupo1[1].selecao[0].nome+" x "+jsonData.grupo1[3].selecao[0].nome+"<br />");
document.write(jsonData.grupo1[2].selecao[0].nome+" x "+jsonData.grupo1[0].selecao[0].nome+"<br />");

However, as there are several groups, if continuing to organise them in this way will result in a very large code, I wonder if there is a better way to do it?

javascript refactoring

  • Let’s give the prize of "unusual javascript that will take a while so we can understand"? I’m kidding. @Hunteros you are using some library or prefer we reply without using them?

1 answer

4


You can organize the data differently, it will depend on them and how you will present them. An example is to put them in a Array, to facilitate access to the different groups. 

var dados = [
    [
        {"selecao": [{"nome":"brasil"},  {"resultado": [{"a":0},{"a":4},{"a":2}]}]},
        {"selecao": [{"nome":"croacia"}, {"resultado": [{"a":0},{"a":4},{"a":2}]}]},
        {"selecao": [{"nome":"camaroes"},{"resultado": [{"a":0},{"a":4},{"a":2}]}]},
        {"selecao": [{"nome":"mexico"},  {"resultado": [{"a":0},{"a":4},{"a":2}]}]}
    ] /* , [grupo 2, etc] */
];

The eval was not necessary and the alert I suppose it would be for testing.

Now, let’s create a variable to organize the games: in this case I used an Array that contains the games, which can be organized in [selecao-1, selecao-2] or objects:

var jogos = [[0, 1], [3, 2], [0, 3], /* ... */];

So let’s show the data:

document.write(jogos.map(function (times) {
  return dados[0][times[0]].selecao[0].nome + " x " + dados[0][times[1]].selecao[0].nome;
}).join('<br>'));

If you are going to use a library or if the data needs to be shown otherwise you can change this last block of code to adapt to it.

Still, depending on the way you organized HTML you can stop using the document.write and use functions such as .appendChild and .insertBefore, preventing HTML from being reprocessed, which makes it faster.

Browser other questions tagged javascript refactoring

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