How to return a JSON block via request

Asked

Viewed 100 times

0

I received a challenge that I have to accomplish my curriculum in HTML, so my professional experiences and technical skills have to pick up via request as described below:

"The list of companies MUST be loaded through a request that must return the mockup of a JSON containing the list of companies that in turn must be interpreted and arranged on the screen correctly (You can use the site https://www.mockable.io/ to create the mockup)."

Following the guidance I did my GET json on mockable.io and stayed in the following way:

{
"empresas": [
{
    "id": "1",
 "periodo": "[2012-2015]",
 "empresa": "OLISA COM. DE FRIOS E LATICINIOS LTDA",
 "cargo": "AUXILIAR ADMINISTRATIVO",
 "funcoes": "ROTINAS ADMINISTRATIVAS, TELEVENDAS, COMPRAS."
},
{
    "id": "2",
 "periodo": "[2015-2016]",
 "empresa": "OLISA COM. DE FRIOS E LATICINIOS LTDA",
 "cargo": "VENDEDOR",
 "funcoes": "VENDA DE FRIOS E LATICINIOS, ESTOQUE, LOGISTICA."
},
{
    "id": "3",
 "periodo": "[2016-2018]",
 "empresa": "E.C.P NUNES DE OLIVEIRA COM. DE FRIOS E LATICINIOS ME",
 "cargo": "VENDEDOR",
 "funcoes": "VENDA DE FRIOS E LATICINIOS, ESTOQUE, LOGISTICA."
},
{
    "id": "4",
 "periodo": "[2018-ATUAL]",
 "empresa": "ASTERSOFT SISTEMAS LTDA",
 "cargo": "VENDEDOR",
 "funcoes": "VENDA E COMERCIO DE SOFTWARE ERP/CONTABIL/LOTEAMENTO."
}
]
}

and my HTML was like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Curriculum Samuel de Oliveira Neto</title>
</head>

<body>
  <script>
    "use strict";
    const urlXP = "https://demo1915525.mockable.io/expprofissional";
    const urlHAB = "https://demo1915525.mockable.io/habtecnicas";

    function httpGetAsync(theUrl, callback) {
      let xmlHttp = new XMLHttpRequest();
      xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
          callback(xmlHttp.responseText);
      }
      xmlHttp.open("GET", theUrl, true); // true for asynchronous 
      xmlHttp.send(null);
    }

    httpGetAsync(urlXP, (resp) => {
      console.log("urlXP", resp);
    })

    httpGetAsync(urlHAB, (resp) => {
      console.log("urlHAB", resp);

    })
  </script>

  <h1> Samuel de Oliveira Neto </h1>
  <hr>
  <h3>Brasileiro, União estavel, 23 anos.</h3>
  <h3>Rua José Roque Salton, 1334 - Terra Bonita - Londrina-PR</h3>
  <h3>Categoria CNH: A/B</h3>
  <h3>Telefone: (43)99687-5004 / E-mail: [email protected]</h3>
  <hr>

  <h1>Experiências Profissionais:</h1>

  <hr>
  <hr>
  <h1> Formação: </h1>
  <hr>
  <h3>•Ensino Médio Completo. </h3>
  <h3>•Cursando Analise e Desenvolvimento de Sistemas (Faculdade Positivo Londrina) Periodo: 4º Semestre (2º Ano) </h3>
  <hr>

  <h1>Habilidades Técnicas:</h1>
  <hr>
  <hr>

  <h1>Idiomas:</h1>
  <hr>
  <h3>•Inglês: Escrita - Básico / Leitura - Básico</h3>
  <hr>

  <h1>Interesses Profissionais:</h1>
  <hr>
  <h3>•Desenvolvimento Front-End</h3>
  <h3>•Disponibilidade de horarios: matutino e vespertino</h3>
</body>

</html>

The question is: how do I get my json information to appear within the respective HTML fields? (Exp. Professional and Technical Skills?)

Att.

javascript json

  • how will you get access to this json? in your html you have access?

2 answers

1

There are many ways to write this. In all you will need a javascript function to go through the array of companies that returned in the request.

One is to place a div with an id or class that encapsulates the <h1> companies. In your role, pass as a parameter the return of this GET, to manipulate it using a foreach, select the div created with a querySelector, and inside the foreach, dynamically create the elements according to what you need. Ideal is that your HTML is better formatted, with specific tags for each section.

Ex:

function criarElementos (data){
  var empresas = document.querySelector('.empresas');

  data.empresas.forEach(function(empresa){
     var novoElemento = document.createElement('span');
     novoElemento.innerText = empresa.id;
  })
};

Read these documents, keep studying always and good luck!

https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

0

Having the values in a variable resp just access the desired properties to take the values and use the innerText to set in an element:

//Exemplo de dados 
respHT = [{
  html: "HTML Básico",
  node: "Node Básico"
}];

respEP = [{
  id: "1",
  periodo: "[2012-2015]",
  empresa: "OLISA COM. DE FRIOS E LATICINIOS LTDA",
  cargo: "AUXILIAR ADMINISTRATIVO",
  funcoes: "ROTINAS ADMINISTRATIVAS, TELEVENDAS, COMPRAS."
}];

//Faz um loop no array de resposta e adiciona ao elemento
for (ht in respHT[0]) document.getElementById('ht').innerHTML += '<li>' + respHT[0][ht] + '</li>';

for (ep of respEP) document.getElementById('ep').innerHTML += '<li>' + ep.empresa + ' - ' + ep.cargo + '</li>';
<ul id="ht"></ul>
<ul id="ep"></ul>

Browser other questions tagged javascript json

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