devmeireles · April 16, 2018 22:35
diff --git a/index.php b/index.php
 <doctype html>
 <html lang="pt-br">
 <head>
    <title>Index</title>
    <meta charset="UTF-8"/>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
    <script>

        function imgError(image){
            image.onerror = "";
            image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLBsuZgfEjK-JYDYkb3T69PnXMWRKOSaZI8eF67-EX9o2nhRCXJg";
            return true;
        }
        var listaDeps = new Array();

        function buscarListaDeps (urlInicio) {
            var corpoResposta;
            var req = new XMLHttpRequest();
            var dados;

            req.open ("GET", urlInicio);
            req.onreadystatechange = function (evt) {
               if (req.readyState === req.DONE && req.status >= 200 && req.status < 300) {
                    // A requisição foi respondida com sucesso.
                    corpoResposta = JSON.parse(req.responseText);



                    listaDeps = listaDeps.concat(corpoResposta.dados);


                    // Se houver um link de rel="next" na resposta, chamar a função de busca
                    // outra vez usando esse link
                    // VERSÃO COM LOOP FOR
                    for (var i = 0; i < corpoResposta.links.length; i++) {

                        if (corpoResposta.links[i].rel === "next") {
                            buscarListaDeps(corpoResposta.links[i].href);
                            return;
                        }
                    }

                    /* VERSÃO USANDO FOREACH
                    corpoResposta.links.forEach (
                        function (val, idx, arr) {
                            if (val.rel === "next") {
                                buscarListaDeps (val.href);
                                return;
                            }
                        }
                    );
                    */

                    menuCarregarOpcoes();

                } // FIM DO "IF"
            } // FIM DE onreadystatechange
            req.setRequestHeader ("Accept", "application/json");
            req.send();
        }

        buscarListaDeps("https://dadosabertos.camara.leg.br/api/v2/deputados?itens=100");


        function menuCarregarOpcoes() {
            var i=0;

            while (listaDeps[i]) {
                //console.log(listaDeps[i]);
                $('.profile-row').append(
                    '<div class="col-md-2 text-center">'+
                        '<a href="profile.php?id='+$.trim(listaDeps[i].id)+'">'+
                            '<div class="col-md-12">'+
                                '<img onerror="imgError(this)"; src="'+$.trim(listaDeps[i].urlFoto)+'" />'+
                            '</div>'+
                            '<div class="col-md-12">'+
                                '<p>'+listaDeps[i].nome+'</p>'+
                            '</div>'+
                            '<div class="col-md-12">'+
                                '<p>'+listaDeps[i].siglaPartido+'</p>'+
                            '</div>'+
                        '</a>'+
                    +'</div>'
                );    
                i++;
                
            }
        }

        
        
    </script>
 </head>
 <body>
    <!-- Aqui é criado o controle de menu -->
    <div class="row">
        <div class="col-md-12 profile-row">
        </div>

    </div>

 </body>
 </html>
	<doctype html>
	<html lang="pt-br">
	<head>
	<title>Index</title>
	<meta charset="UTF-8"/>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<script
	src="https://code.jquery.com/jquery-1.12.4.min.js"
	integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
	crossorigin="anonymous"></script>
	<script>

	function imgError(image){
	image.onerror = "";
	image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLBsuZgfEjK-JYDYkb3T69PnXMWRKOSaZI8eF67-EX9o2nhRCXJg";
	return true;
	}
	var listaDeps = new Array();

	function buscarListaDeps (urlInicio) {
	var corpoResposta;
	var req = new XMLHttpRequest();
	var dados;

	req.open ("GET", urlInicio);
	req.onreadystatechange = function (evt) {
	if (req.readyState === req.DONE && req.status >= 200 && req.status < 300) {
	// A requisição foi respondida com sucesso.
	corpoResposta = JSON.parse(req.responseText);



	listaDeps = listaDeps.concat(corpoResposta.dados);


	// Se houver um link de rel="next" na resposta, chamar a função de busca
	// outra vez usando esse link
	// VERSÃO COM LOOP FOR
	for (var i = 0; i < corpoResposta.links.length; i++) {

	if (corpoResposta.links[i].rel === "next") {
	buscarListaDeps(corpoResposta.links[i].href);
	return;
	}
	}

	/* VERSÃO USANDO FOREACH
	corpoResposta.links.forEach (
	function (val, idx, arr) {
	if (val.rel === "next") {
	buscarListaDeps (val.href);
	return;
	}
	}
	);
	*/

	menuCarregarOpcoes();

	} // FIM DO "IF"
	} // FIM DE onreadystatechange
	req.setRequestHeader ("Accept", "application/json");
	req.send();
	}

	buscarListaDeps("https://dadosabertos.camara.leg.br/api/v2/deputados?itens=100");


	function menuCarregarOpcoes() {
	var i=0;

	while (listaDeps[i]) {
	//console.log(listaDeps[i]);
	$('.profile-row').append(
	'<div class="col-md-2 text-center">'+
	'<a href="profile.php?id='+$.trim(listaDeps[i].id)+'">'+
	'<div class="col-md-12">'+
	'<img onerror="imgError(this)"; src="'+$.trim(listaDeps[i].urlFoto)+'" />'+
	'</div>'+
	'<div class="col-md-12">'+
	'<p>'+listaDeps[i].nome+'</p>'+
	'</div>'+
	'<div class="col-md-12">'+
	'<p>'+listaDeps[i].siglaPartido+'</p>'+
	'</div>'+
	'</a>'+
	+'</div>'
	);
	i++;

	}
	}



	</script>
	</head>
	<body>
	<!-- Aqui é criado o controle de menu -->
	<div class="row">
	<div class="col-md-12 profile-row">
	</div>

	</div>

	</body>
	</html>