brunolimadevelopment/Carregando JSON com AJAX

## Carregando JSON com AJAX
// arquivo.js
{
  "events": [
    {
      "location": "javascript",
      "date": "May 1",
      "map": "img/javascript.png"
    },
    {
      "location": "jquery",
      "date": "May 15",
      "map": "img/jquery.png"
    },
    {
      "location": "react",
      "date": "May 30",
      "map": "img/react.png"
    }
  ]
}


/////////////////////////////////////////////////////

// arquivo js
$(function () {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        if(xhr.status === 200) {
            responseObject = JSON.parse(xhr.responseText); // JSON.parse() DESSERIALIZAÇÃO - STRING PARA OBJETO JS
            var newContent = '';

            for(var i = 0; i < responseObject.events.length; i++){
                newContent += '<div class="event">';
                newContent += '<img src="' + responseObject.events[i].map + '" ';
                newContent += 'alt="' + responseObject.events[i].location + '" ';
                newContent += '<p><b>' + responseObject.events[i].location + '</b><br> ';
                newContent += responseObject.events[i].date + '</p>';
                newContent += '</div>';
            }

            document.getElementById('content').innerHTML = newContent;
        }
    };
    xhr.open('GET', 'arquivo.json', true);
    xhr.send(null);
});

///////////////////////////////////////////////////

// arquivo html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Html e Ajax</title>
    <link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
    <h2 class="title">Home</h2>
    <div class="area-ajax">
        <h2 class="title">Carregando HTML com AJAX</h2>
        <div class="content" id="content"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="main.js"></script>
</body>
</html>
	// arquivo.js
	{
	"events": [
	{
	"location": "javascript",
	"date": "May 1",
	"map": "img/javascript.png"
	},
	{
	"location": "jquery",
	"date": "May 15",
	"map": "img/jquery.png"
	},
	{
	"location": "react",
	"date": "May 30",
	"map": "img/react.png"
	}
	]
	}


	/////////////////////////////////////////////////////

	// arquivo js
	$(function () {
	var xhr = new XMLHttpRequest();
	xhr.onload = function() {
	if(xhr.status === 200) {
	responseObject = JSON.parse(xhr.responseText); // JSON.parse() DESSERIALIZAÇÃO - STRING PARA OBJETO JS
	var newContent = '';

	for(var i = 0; i < responseObject.events.length; i++){
	newContent += '<div class="event">';
	newContent += '<img src="' + responseObject.events[i].map + '" ';
	newContent += 'alt="' + responseObject.events[i].location + '" ';
	newContent += '<p><b>' + responseObject.events[i].location + '</b><br> ';
	newContent += responseObject.events[i].date + '</p>';
	newContent += '</div>';
	}

	document.getElementById('content').innerHTML = newContent;
	}
	};
	xhr.open('GET', 'arquivo.json', true);
	xhr.send(null);
	});

	///////////////////////////////////////////////////

	// arquivo html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Html e Ajax</title>
	<link rel="stylesheet" href="style.css" type="text/css" >
	</head>
	<body>
	<h2 class="title">Home</h2>
	<div class="area-ajax">
	<h2 class="title">Carregando HTML com AJAX</h2>
	<div class="content" id="content"></div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>