Javascript passar valores do GET para o input

[klasss]

 

Necessito de uma ajuda para passar os valores obtidos por um get para os input.

<script>
function myFunction() {
	var input = document.querySelector("#zIp");

	const request = new XMLHttpRequest();
	const url = 'https://api.XXXXX.com/XXXX/XXXXXXXXX.XXXX/' + input.value;
	request.open("GET", url);
	request.send();

    document.getElementById("Street").value = url;
	
	
	request.onload = () => console.log(request.responseText)

	
	var json = request;
	document.getElementById("sTate").value = request.Morada;
	
	$('#ciTy').val(json.Morada)



}
</script>

Já tenho aqui dois testes e não consigo que sejam mostrados os valores obtidos na API

 

Os dados obtidos vêm da seguinte forma:

{"Freguesia": "Sintra", "Concelho": "Sintra", "CodigoDistrito": 11, "Distrito": "Lisboa"}

o Input que tenho é : 

 

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
        <div class="form-group">
            <label for="ciTy">City</label>
            <input type="name" class="form-control" id="ciTy" placeholder="Enter City">
        </div>
    </div>

Obrigado a todos 

[Zex]

Esse post está muito confuso.

É melhor testares apenas uma pequena parte de cada vez.

Por exemplo, esquece a parte do GET e faz um pequeno teste que só mostra os valores que estão numa variável.

[klasss]

Tens toda a razão. Não costumo usar muito o JavaScript e agora para um projeto até mé da jeito a sua utilização. 
 

const request = new XMLHttpRequest();
	const url = 'https://api.duminio.com/ptcp/ptapi60a2b09a54fa31.92645493/' + input.value;
	request.open("GET", url);
	request.send();

    document.getElementById("Street").value = url;
	
	
	request.onload = () => console.log(request.responseText)

Neste ultimo campo consigo ver os dados atraves do inspecionar (browser e lado direito do rato). Mas ainda não consegui visualizar os campos no browser. 

[Zex]

Nunca usei isso mas talvez estejas a usar comunicação assincrona 

e, nesse caso tens que usar os dados logo que os obtenhas

senão eles desaparecem.

Portanto, experimenta em vez de

request.onload = () => console.log(request.responseText)

invocar logo uma função para colocar no browser:

request.onload = () => colocar_no_browser(request.responseText)

 

[klasss]

tentei dessas varias formas mas não consegui que os dados da var passassem para o browser

[Ivo Vicente]

Estás a usar jQuery? Digo isto, porque no fim do código usas

$('#ciTy').val(json.Morada)

Se não processares os valores dentro do onload não tens ligação para os resultados sem ser o console.log (como refere o @Zex)

request.onload = () => {
  // Faz parse à resposta
  let res = JSON.parse(request.responseText);
  // Identifica o input e define o novo valor 
  document.querySelector("#ciTy").value = res.Morada;
}

 

Edited May 23, 2021 at 06:53 PM by Ivo Vicente