-2

Estou criando uma função que pega elementos de um arquivo .json e cria opções para um select no HTML dinamicamente. Esse arquivo esta ordenado, mas quando é apresentado no HTML fica desordenado.

Exemplo .json

{
  "01": {
    "regiao": "Dubai",
    "name": "Dubai",
    "address": "Jebel Ali Free Zone South JAFZA Job 19, Office 1301, P.O. box 261901 – Dubai – UAE (Unitade Arab Emirates)",
    "phone": "+971 4 885-5404",
    "fax": "+971 4 885-5405",
    "email": "[email protected]",
    "time": "9:00 às 18:00 (GMT +4)"
  },
  "02": {
    "regiao": "Jerusalém",
    "name": "Jerusalém",
    "address": "3rd Floor, Gati Tower, Kiryat Hamada 3, Har Hotzvim, Jerusalem, P.O Box 45316",
    "phone": "+9720732495829",
    "fax": "",
    "email": "[email protected]",
    "time": "9:00 às 18:00 (GMT + 2)"
  },
  "03": {
    "regiao": "Centro Oeste BR",
    "name": "Brasília – DF",
    "address": "Endereço: SAUN Quadra 05, Bloco C, Torre II, salas 1201 a 1701 – Centro Empresarial CNC – CEP: 70.040-250 – Brasília-DF",
    "phone": "+55 61 2027-0202",
    "fax": "",
    "email": "[email protected]",
    "time": "9:00 às 18:30"
  }
}

Exemplo do código para criar os elementos:

fetch(URL)
  .then(function(resp) {
    if (resp.status !== 200) {
      console.warn('Error: ' + resp.status);
      return;
    }

    resp.json().then(function(data) {
      let option;
      let ordered = {};

      Object.keys(data)
        .sort()
        .forEach(value => {
          ordered[value] = data[value];
        });
      console.log(ordered);

      Object.entries(ordered).forEach(([key, value]) => {
        option = document.createElement('option');
        option.value = key;
        option.text = value.regiao;
        dropdown.add(option);
      });
    });
  })
  .catch(function(err) {
    console.error('Error: ', err);
  });

Exemplo do output:

10: {regiao: "Bogotá Colombia", name: "Bogotá", address: "Carrera 7 # 116 -50, Flormorado Plaza, Torre 1, We Work  – Bogotá-Colombia", phone: "+57 1 794 4883", fax: "", …}
11: {regiao: "Pequim China", name: "Pequim", address: "Room 1309 Office Tower 2, China Central Place,79 Jianguo Road, Beijing, 100025, China", phone: "+86 10 5969-5333", fax: "+86 10-5969-5123", …}
12: {regiao: "Xangai China", name: "Xangai", address: "Room 1716, 17th floor No. 818 Nanjing West Road, Shanghai – China", phone: "+86 21 5203-0368", fax: "", …}
13: {regiao: "Moscou Russia", name: "Moscou", address: "Smolenskaya Square 3, office 756, Moscow 121099, Russia", phone: "+7 495 967-7901", fax: "", …}
14: {regiao: "Bruxelas Belgica", name: "Bruxelas", address: "Avenue des Arts, 19 A/D, B-1000, Brussels – Belgium", phone: "+32 2211 0530", fax: "", …}
01: {regiao: "Dubai", name: "Dubai", address: "Jebel Ali Free Zone South JAFZA Job 19, Office 130… box 261901 – Dubai – UAE (Unitade Arab Emirates)", phone: "+971 4 885-5404", fax: "+971 4 885-5405", …}
02: {regiao: "Jerusalém", name: "Jerusalém", address: "3rd Floor, Gati Tower, Kiryat Hamada 3, Har Hotzvim, Jerusalem, P.O Box 45316", phone: "+9720732495829", fax: "", …}
03: {regiao: "Centro Oeste BR", name: "Brasília – DF", address: "Endereço: SAUN Quadra 05, Bloco C, Torre II, salas…o Empresarial CNC – CEP: 70.040-250 – Brasília-DF", phone: "+55 61 2027-0202", fax: "", …}
04: {regiao: "Nordeste BR", name: "Recife – PE", address: "Av. Engenheiro Antônio de Góes, 60 – Sala 604 – Ed…Trade Center – Pina – CEP: 51.010-000 – Recife-PE", phone: "+55 61 2027-0779", fax: "", …}
05: {regiao: "Norte BR", name: "Belém – PA", address: "Tv. Quintino Bocaiúva, 1588, Bloco B, 4º andar Naz…é, Ed. Sede da FIEPA – CEP: 66.035-190 – Belém-PA", phone: "+55 91 4009-4324", fax: "", …}
06: {regiao: "Sudeste BR", name: "São Paulo – SP", address: "Avenida Paulista n° 1313, 4º Andar, Sala 410-B, Ed. Sede da FIESP – CEP: 01311-923 – São Paulo-SP", phone: "+55 11 3549-4383", fax: "", …}
07: {regiao: "Sul BR", name: "Porto Alegre – RS", address: "Av. Assis Brasil 8787, bloco 2, FIERGS, Bairro Sarandi – CEP: 91.010-004 – Porto Alegre-RS", phone: "+55 51 3347-8718", fax: "", …}
08: {regiao: "São Francisco USA", name: "São Francisco", address: "2 Embarcadero Center, 8th Floor, San Francisco, CA 94111", phone: "+1 415 230-2181", fax: "", …}
09: {regiao: "Miami USA", name: "Miami", address: "Miami Center Building 201 South Biscayne Boulevard. Suite 1200 Miami FL 33131", phone: "+1 305 704-3500 / +1 305 704-3505"

Tentei user esse código para ordenar o output mas não esta dano certo:

Object.keys(data)
  .sort()
   .forEach(value => {
      ordered[value] = data[value];
 });

Os dados que estou usando na criação das opções, não é todo o resultado e sim os "id", que é a numeração e a região e pego esses dados sem problemas, nas como disse fira fora da ordem.

Como posso resolver essa questão?

3
  • 1
    Acho que essa pergunta me parece semelhante à sua: pt.stackoverflow.com/q/433431/8063 Dá uma olhada e dá um feedback aqui.
    – Sam
    Commented 31/03/2020 às 0:03
  • Ordernar por região?
    – novic
    Commented 31/03/2020 às 0:06
  • Não essa pergunta não é a mesma dúvida que estava tendo, mas já consegui resolver. Retirei os 0 do item de 1 ao 9 e funcionou. Mas obrigado a todos. Commented 31/03/2020 às 0:08

2 Respostas 2

2

A posição de chaves em Objetos não é garantida em JavaScript, isso é o papel de arrays. Na prática, no teu código estás já a trabalhar com uma array quando usas Object.values() por isso o melhor seria usar array sempre e ordenar essa array pelos IDs desses objetos dentro da array.

Podias fazer isso assim:

fetch(URL)
  .then(function(resp) {
    if (resp.status !== 200) {
      console.warn('Error: ' + resp.status);
      return;
    }

    resp.json().then(function(data) {
      Object.keys(data)
        .map(key => {
          const option = {
            option.value: Number(key), // converte em numero para facilitar a ordenação
            option.text: value.regiao
          }
        })
        .sort((a, b) => a.value - b.value) // ordenar a array
        .forEach(({value, text}) => {
          option = document.createElement('option');
          option.value = value;
          option.text = text;
          dropdown.add(option);
        });
    });
  })
  .catch(function(err) {
    console.error('Error: ', err);
  });
1

Acredito que voce possa simplificar um pouco a logica e ao mesmo tempo, conforme a sugestao ja citada, voce nao deveria acreditar que as keys do seu objeto irao ordenar suas options. Voce poderia simplificar um pouco o seu objeto json para uma lista que contem algo parecido com este:

[
    {
        "regiao": "Dubai",
        "name": "Dubai",
        "address": "Jebel Ali Free Zone South JAFZA Job 19, Office 1301, P.O. box 261901 – Dubai – UAE (Unitade Arab Emirates)",
        "phone": "+971 4 885-5404",
        "fax": "+971 4 885-5405",
        "email": "[email protected]",
        "ordem": 2, // atributo para poder ordernar suas options
        "valor": "002", // valor que quer atribuir a option, poderia ser ate mesmo o nome da "regiao" ou "nome"
    },
    {
        "regiao": "Centro Oeste BR",
        "name": "Brasília – DF",
        "address": "Endereço: SAUN Quadra 05, Bloco C, Torre II, salas 1201 a 1701 – Centro Empresarial CNC – CEP: 70.040-250 – Brasília-DF",
        "phone": "+55 61 2027-0202",
        "fax": "",
        "email": "[email protected]",
        "time": "9:00 às 18:30",
        "ordem": 1,
        "valor": "001",
    },
];

Todavia, segue minha sugestao de solucao a sua pergunta, e espero ter ajudado!

function makeOption(item, key) {
    const option = document.createElement("option");
    option.text = item.regiao;
    option.value = key;
    return option;
}

fetch(URL)
    .then(function(resp) {
        if (resp.status !== 200) {
            console.warn("Error: " + resp.status);
            return;
        }

        const data = await resp.json(); // espera pela promise aque que resolva.

        Object.keys(data).forEach((key) => {
            const option = makeOption(data[key], key);
            dropdown.add(option);
        };

    })
    .catch(function(err) {
        console.error("Error: ", err);
    });
1
  • Obrigado Caio, acho que tem razão em simplificar o json e vou aplicar a sua sugestão em retirar o "ID" que tinha criado e criar o campo ordem e vou estudar seu código para melhorar o meu. Valeu pela ajuda. Commented 31/03/2020 às 14:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .