Json
{
"jogos": [
{
"id": "01",
"title": "GTA San Andreas",
"youtube": "https://www.youtube.com/watch?v=8gIrBjh-H9o",
"icon": "https://lh3.googleusercontent.com/DbWKGracPNswX6GRTf69LpZHsetAOEmaKXE9HEDAS_g7t3QCERmjN7rdApcrlFyqXLBOZ4Oe6LmjPsUhnwG26vqySdQZpVqOXtBU98NrWnLwHuoPdoJ2AL1vnHrDZnYaj25ekDVPlA=s180-p-k",
"image": [
"https://lh3.googleusercontent.com/PGZPBhJ1SquRqEEUIvlLsfvwEtysgQjLSAQjYCLQKRXSqzAAHxyvaFmTnIPN4RCCp2K71helGAG3XmMCNqKrsl-zZd4Gcg02Nan_vUgK8SMZbifEbjsSvfJ5c-zQPTzCbdjE9HUmbA=w800",
"https://lh3.googleusercontent.com/W6sbJcC3efPP6cWPfzJ6YbGTrPaZn55zL_PbY3HkJ3N4pqTNDzQ6vwseUZgBtjgH219r2-12fvwbakgQyhq3OsHebB0_1yKCsYXvLzhBKIsfo6M1Rmsso6-3ePMPRPe_Vh3gJa-pWg=w800",
"https://lh3.googleusercontent.com/Yq13A2nzEhpFPf_x-um8yXSrn-B05m0wP1jJmn86Thy5cdV1McNKcg7VcUUd7H-MK91WEgc0nWOcmM7K_Rmhj__9WfP-OJAe6CnX_xcVECt1WYOlcYb3f2co_EbNFVC3lB6PVdaKPw=w800",
"https://lh3.googleusercontent.com/CJVkNTiN2RHTX9N2P1z9riMttor6gXZ2YcOprDgVBykXxnG5UyfkNKyFsArihpm6phi51CpKTB7xtaAsiuGfkTIjXrvI9Hrz_WiBH33-JIVCD6ip1pwmcPUE9s0VOu_lmt8Qo9Gvpg=w800",
"https://lh3.googleusercontent.com/UZ6eMnJ19kwMMEQOXryI9zDpY4_muvDJYmYur39GtwYg1IpF2ugCwiIU70QQuUdTFNnZNRd3mMeSmNqCKI91Ng21MaIfuTZiSDb86QcPX4GrAtMLTeRjNIhbiD3z1DfN1UwqCbL6pQ=w800",
"https://lh3.googleusercontent.com/-IK2KvBbKvVFBTniTKKtdXxAPmWQPHrjmOcUeVOW1A86hAVT48POrxtbZG2akCLpuiVZ2Lq3EQDood9-5xjY5Z0gXKFPd9OgPFjNNlnbn2PypeneVXl4nnUizTbCxJP8qk5NB0IkSA=w800",
"https://lh3.googleusercontent.com/B5fxPRvTFNse2aRPgVkKNm_mBI1va3z-U9qhQvMIeYvHjVQ0yYI2o20wIxyyIrGR5n9n17SXcxGLqVphncvpcscnVGEc7n1uASSbARAClmN9oTS26ruO0veKugeUznMURq8NVA5FwQ=w800"
]
"developer": "Rockstar Games",
"version": "2.00",
"size": "2.46GB",
"added": "2020-06-11",
"problem": false,
"release": "27/07/2007",
"gender": [
"Ação"
]
},
{
"id": "02",
"title": "Survival Craft 2",
"youtube": "https://www.youtube.com/watch?v=3zPabXHv-dY",
"icon": "https://lh3.googleusercontent.com/l7OTNI2cla7YyMLF1DCSqnh7UDpsTA9bfcBJQgYCRwu8TsyK8w_g3mSHieccdhPn8e6s3iQ7h0RmDAfZm_MYltMrnkJXIyDl0AWzw8hyt2NhtqM26KO-vjSviuPab4A9dvSzMr3XjA=s180-p-k",
"image": [
"https://lh3.googleusercontent.com/gfOpFTbywDaPDv5uYcttt1sM84OAsb745Af_oR13AIGq_P3neWoFAXR1hMLArmj7wudrOPFHAwNULjaQVyrUby9tD3RqpY8li9sjE98sTDzX1vCoH7trOp3V_xMR8B2y4VQwKwedug=w800",
"https://lh3.googleusercontent.com/3mtZuiDx5tjyvFe05ZvX6b65BeBEKyfPya1VvtSMkbSBLlc24gP8IWGHrYjTr4THkhzH8Y_Z4OVGFaGnTrS_1acL90o-E6kwW36ubVBaYAYQQtyl6Nq7DfY_IXCFrlNHS7FX4BatDg=w800",
"https://lh3.googleusercontent.com/V2ztPnfWZ0pnGJn4VXRRrhT85p9sGn_Furka9ANebRVRsR9wsxabFIs9YfYdrWVCShblkjgOACzfD2IjgJjmDlk3-T84LJVMbIxoxjPS0lPd8u5wY2wJeCW4-CbnpZXKl6JnHDvn2w=w800",
"https://lh3.googleusercontent.com/dMcnXG7jLrbbmD5qn1HuPDwjyBDhu6gg1bDH2rBhfBQIhU4SLRQLkncbQJIY0Nt5PxGv18wXFuBT0cg1xldyMrWgP67SlMOBJmotZnoTL5Rj6MnajxFJ14-gPQs7JpiBL7nXuz8M5g=w800",
"https://lh3.googleusercontent.com/c1GB83SlraAs98TS4mZQUPU1q4sISI1KZ3E0q0Ren5xFxfCXIcay_Y8AzxXo37cZy7AkrU5Cqj1anA8TdaGum3X20495kJ_PpvLwPL-xPKBOC23NkL_Bldi7LStLyANIjHTKWcB5fg=w800",
"https://lh3.googleusercontent.com/5R659ZRFIoIJoxS-QILseBAVR47DHbizu3RsYbyqqhMO4NxyKnR3d0QJJ-j7b5WVDWYr_f-ArijDx6M3M5DcwkzRJ28FBRMPUji16xbnWDlon7JpVWUSGzX43K8qPDPfrXWITVzO5Q=w800",
"https://lh3.googleusercontent.com/BkkB_dz1z4OrUWesaqoSCUJK9Cy-6tZEFWSHHYS_vjaRRSxsWq-N5DXpdEKRUxFm4WOj28vZR_1J7ds-E9kd2VX-TOJabey818HUW2KHscOBBXLE9M8ICO9onpJmbCz3F6z2EicaSQ=w800",
"https://lh3.googleusercontent.com/AxB0G04FYMxkv393UboFs8ONTedl5anI7mExqN2YmQWyeXhLFdxfTiZ8sP9AUHcMqkMvF0mfwPTPjnZLmBQ9pyMmxMdSvuU3zMMEa1KezbJg7VKcWDl_h8zmtwsHX9SinUOka8ON6Q=w800"
]
"developer": "Candy Rufus Games",
"version": "2.2.10.4",
"size": "26.33MB",
"added": "2020-06-11",
"problem": false,
"release": "14/12/2016",
"gender": [
"Ação",
"Aventura"
]
},
{
"id": "03",
"title": "GTA San Andreas",
"youtube": "https://www.youtube.com/watch?v=8gIrBjh-H9o",
"icon": "https://lh3.googleusercontent.com/DbWKGracPNswX6GRTf69LpZHsetAOEmaKXE9HEDAS_g7t3QCERmjN7rdApcrlFyqXLBOZ4Oe6LmjPsUhnwG26vqySdQZpVqOXtBU98NrWnLwHuoPdoJ2AL1vnHrDZnYaj25ekDVPlA=s180-p-k",
"image": [
"https://lh3.googleusercontent.com/PGZPBhJ1SquRqEEUIvlLsfvwEtysgQjLSAQjYCLQKRXSqzAAHxyvaFmTnIPN4RCCp2K71helGAG3XmMCNqKrsl-zZd4Gcg02Nan_vUgK8SMZbifEbjsSvfJ5c-zQPTzCbdjE9HUmbA=w800",
"https://lh3.googleusercontent.com/W6sbJcC3efPP6cWPfzJ6YbGTrPaZn55zL_PbY3HkJ3N4pqTNDzQ6vwseUZgBtjgH219r2-12fvwbakgQyhq3OsHebB0_1yKCsYXvLzhBKIsfo6M1Rmsso6-3ePMPRPe_Vh3gJa-pWg=w800",
"https://lh3.googleusercontent.com/Yq13A2nzEhpFPf_x-um8yXSrn-B05m0wP1jJmn86Thy5cdV1McNKcg7VcUUd7H-MK91WEgc0nWOcmM7K_Rmhj__9WfP-OJAe6CnX_xcVECt1WYOlcYb3f2co_EbNFVC3lB6PVdaKPw=w800",
"https://lh3.googleusercontent.com/CJVkNTiN2RHTX9N2P1z9riMttor6gXZ2YcOprDgVBykXxnG5UyfkNKyFsArihpm6phi51CpKTB7xtaAsiuGfkTIjXrvI9Hrz_WiBH33-JIVCD6ip1pwmcPUE9s0VOu_lmt8Qo9Gvpg=w800",
"https://lh3.googleusercontent.com/UZ6eMnJ19kwMMEQOXryI9zDpY4_muvDJYmYur39GtwYg1IpF2ugCwiIU70QQuUdTFNnZNRd3mMeSmNqCKI91Ng21MaIfuTZiSDb86QcPX4GrAtMLTeRjNIhbiD3z1DfN1UwqCbL6pQ=w800",
"https://lh3.googleusercontent.com/-IK2KvBbKvVFBTniTKKtdXxAPmWQPHrjmOcUeVOW1A86hAVT48POrxtbZG2akCLpuiVZ2Lq3EQDood9-5xjY5Z0gXKFPd9OgPFjNNlnbn2PypeneVXl4nnUizTbCxJP8qk5NB0IkSA=w800",
"https://lh3.googleusercontent.com/B5fxPRvTFNse2aRPgVkKNm_mBI1va3z-U9qhQvMIeYvHjVQ0yYI2o20wIxyyIrGR5n9n17SXcxGLqVphncvpcscnVGEc7n1uASSbARAClmN9oTS26ruO0veKugeUznMURq8NVA5FwQ=w800"
]
"developer": "Rockstar Games",
"version": "2.00",
"size": "2.46GB",
"added": "2020-06-11",
"problem": false,
"release": "27/07/2007",
"gender": [
"Ação"
]
},
{
"id": "04",
"title": "Survival Craft 2",
"youtube": "https://www.youtube.com/watch?v=3zPabXHv-dY",
"icon": "https://lh3.googleusercontent.com/l7OTNI2cla7YyMLF1DCSqnh7UDpsTA9bfcBJQgYCRwu8TsyK8w_g3mSHieccdhPn8e6s3iQ7h0RmDAfZm_MYltMrnkJXIyDl0AWzw8hyt2NhtqM26KO-vjSviuPab4A9dvSzMr3XjA=s180-p-k",
"image": [
"https://lh3.googleusercontent.com/gfOpFTbywDaPDv5uYcttt1sM84OAsb745Af_oR13AIGq_P3neWoFAXR1hMLArmj7wudrOPFHAwNULjaQVyrUby9tD3RqpY8li9sjE98sTDzX1vCoH7trOp3V_xMR8B2y4VQwKwedug=w800",
"https://lh3.googleusercontent.com/3mtZuiDx5tjyvFe05ZvX6b65BeBEKyfPya1VvtSMkbSBLlc24gP8IWGHrYjTr4THkhzH8Y_Z4OVGFaGnTrS_1acL90o-E6kwW36ubVBaYAYQQtyl6Nq7DfY_IXCFrlNHS7FX4BatDg=w800",
"https://lh3.googleusercontent.com/V2ztPnfWZ0pnGJn4VXRRrhT85p9sGn_Furka9ANebRVRsR9wsxabFIs9YfYdrWVCShblkjgOACzfD2IjgJjmDlk3-T84LJVMbIxoxjPS0lPd8u5wY2wJeCW4-CbnpZXKl6JnHDvn2w=w800",
"https://lh3.googleusercontent.com/dMcnXG7jLrbbmD5qn1HuPDwjyBDhu6gg1bDH2rBhfBQIhU4SLRQLkncbQJIY0Nt5PxGv18wXFuBT0cg1xldyMrWgP67SlMOBJmotZnoTL5Rj6MnajxFJ14-gPQs7JpiBL7nXuz8M5g=w800",
"https://lh3.googleusercontent.com/c1GB83SlraAs98TS4mZQUPU1q4sISI1KZ3E0q0Ren5xFxfCXIcay_Y8AzxXo37cZy7AkrU5Cqj1anA8TdaGum3X20495kJ_PpvLwPL-xPKBOC23NkL_Bldi7LStLyANIjHTKWcB5fg=w800",
"https://lh3.googleusercontent.com/5R659ZRFIoIJoxS-QILseBAVR47DHbizu3RsYbyqqhMO4NxyKnR3d0QJJ-j7b5WVDWYr_f-ArijDx6M3M5DcwkzRJ28FBRMPUji16xbnWDlon7JpVWUSGzX43K8qPDPfrXWITVzO5Q=w800",
"https://lh3.googleusercontent.com/BkkB_dz1z4OrUWesaqoSCUJK9Cy-6tZEFWSHHYS_vjaRRSxsWq-N5DXpdEKRUxFm4WOj28vZR_1J7ds-E9kd2VX-TOJabey818HUW2KHscOBBXLE9M8ICO9onpJmbCz3F6z2EicaSQ=w800",
"https://lh3.googleusercontent.com/AxB0G04FYMxkv393UboFs8ONTedl5anI7mExqN2YmQWyeXhLFdxfTiZ8sP9AUHcMqkMvF0mfwPTPjnZLmBQ9pyMmxMdSvuU3zMMEa1KezbJg7VKcWDl_h8zmtwsHX9SinUOka8ON6Q=w800"
]
"developer": "Candy Rufus Games",
"version": "2.2.10.4",
"size": "26.33MB",
"added": "2020-06-11",
"problem": false,
"release": "14/12/2016",
"gender": [
"Ação",
"Aventura"
]
},
{
"id": "05",
"title": "GTA San Andreas",
"youtube": "https://www.youtube.com/watch?v=8gIrBjh-H9o",
"icon": "https://lh3.googleusercontent.com/DbWKGracPNswX6GRTf69LpZHsetAOEmaKXE9HEDAS_g7t3QCERmjN7rdApcrlFyqXLBOZ4Oe6LmjPsUhnwG26vqySdQZpVqOXtBU98NrWnLwHuoPdoJ2AL1vnHrDZnYaj25ekDVPlA=s180-p-k",
"image": [
"https://lh3.googleusercontent.com/PGZPBhJ1SquRqEEUIvlLsfvwEtysgQjLSAQjYCLQKRXSqzAAHxyvaFmTnIPN4RCCp2K71helGAG3XmMCNqKrsl-zZd4Gcg02Nan_vUgK8SMZbifEbjsSvfJ5c-zQPTzCbdjE9HUmbA=w800",
"https://lh3.googleusercontent.com/W6sbJcC3efPP6cWPfzJ6YbGTrPaZn55zL_PbY3HkJ3N4pqTNDzQ6vwseUZgBtjgH219r2-12fvwbakgQyhq3OsHebB0_1yKCsYXvLzhBKIsfo6M1Rmsso6-3ePMPRPe_Vh3gJa-pWg=w800",
"https://lh3.googleusercontent.com/Yq13A2nzEhpFPf_x-um8yXSrn-B05m0wP1jJmn86Thy5cdV1McNKcg7VcUUd7H-MK91WEgc0nWOcmM7K_Rmhj__9WfP-OJAe6CnX_xcVECt1WYOlcYb3f2co_EbNFVC3lB6PVdaKPw=w800",
"https://lh3.googleusercontent.com/CJVkNTiN2RHTX9N2P1z9riMttor6gXZ2YcOprDgVBykXxnG5UyfkNKyFsArihpm6phi51CpKTB7xtaAsiuGfkTIjXrvI9Hrz_WiBH33-JIVCD6ip1pwmcPUE9s0VOu_lmt8Qo9Gvpg=w800",
"https://lh3.googleusercontent.com/UZ6eMnJ19kwMMEQOXryI9zDpY4_muvDJYmYur39GtwYg1IpF2ugCwiIU70QQuUdTFNnZNRd3mMeSmNqCKI91Ng21MaIfuTZiSDb86QcPX4GrAtMLTeRjNIhbiD3z1DfN1UwqCbL6pQ=w800",
"https://lh3.googleusercontent.com/-IK2KvBbKvVFBTniTKKtdXxAPmWQPHrjmOcUeVOW1A86hAVT48POrxtbZG2akCLpuiVZ2Lq3EQDood9-5xjY5Z0gXKFPd9OgPFjNNlnbn2PypeneVXl4nnUizTbCxJP8qk5NB0IkSA=w800",
"https://lh3.googleusercontent.com/B5fxPRvTFNse2aRPgVkKNm_mBI1va3z-U9qhQvMIeYvHjVQ0yYI2o20wIxyyIrGR5n9n17SXcxGLqVphncvpcscnVGEc7n1uASSbARAClmN9oTS26ruO0veKugeUznMURq8NVA5FwQ=w800"
]
"developer": "Rockstar Games",
"version": "2.00",
"size": "2.46GB",
"added": "2020-06-11",
"problem": false,
"release": "27/07/2007",
"gender": [
"Ação"
]
},
{
"id": "06",
"title": "Survival Craft 2",
"youtube": "https://www.youtube.com/watch?v=3zPabXHv-dY",
"icon": "https://lh3.googleusercontent.com/l7OTNI2cla7YyMLF1DCSqnh7UDpsTA9bfcBJQgYCRwu8TsyK8w_g3mSHieccdhPn8e6s3iQ7h0RmDAfZm_MYltMrnkJXIyDl0AWzw8hyt2NhtqM26KO-vjSviuPab4A9dvSzMr3XjA=s180-p-k",
"image": [
"https://lh3.googleusercontent.com/gfOpFTbywDaPDv5uYcttt1sM84OAsb745Af_oR13AIGq_P3neWoFAXR1hMLArmj7wudrOPFHAwNULjaQVyrUby9tD3RqpY8li9sjE98sTDzX1vCoH7trOp3V_xMR8B2y4VQwKwedug=w800",
"https://lh3.googleusercontent.com/3mtZuiDx5tjyvFe05ZvX6b65BeBEKyfPya1VvtSMkbSBLlc24gP8IWGHrYjTr4THkhzH8Y_Z4OVGFaGnTrS_1acL90o-E6kwW36ubVBaYAYQQtyl6Nq7DfY_IXCFrlNHS7FX4BatDg=w800",
"https://lh3.googleusercontent.com/V2ztPnfWZ0pnGJn4VXRRrhT85p9sGn_Furka9ANebRVRsR9wsxabFIs9YfYdrWVCShblkjgOACzfD2IjgJjmDlk3-T84LJVMbIxoxjPS0lPd8u5wY2wJeCW4-CbnpZXKl6JnHDvn2w=w800",
"https://lh3.googleusercontent.com/dMcnXG7jLrbbmD5qn1HuPDwjyBDhu6gg1bDH2rBhfBQIhU4SLRQLkncbQJIY0Nt5PxGv18wXFuBT0cg1xldyMrWgP67SlMOBJmotZnoTL5Rj6MnajxFJ14-gPQs7JpiBL7nXuz8M5g=w800",
"https://lh3.googleusercontent.com/c1GB83SlraAs98TS4mZQUPU1q4sISI1KZ3E0q0Ren5xFxfCXIcay_Y8AzxXo37cZy7AkrU5Cqj1anA8TdaGum3X20495kJ_PpvLwPL-xPKBOC23NkL_Bldi7LStLyANIjHTKWcB5fg=w800",
"https://lh3.googleusercontent.com/5R659ZRFIoIJoxS-QILseBAVR47DHbizu3RsYbyqqhMO4NxyKnR3d0QJJ-j7b5WVDWYr_f-ArijDx6M3M5DcwkzRJ28FBRMPUji16xbnWDlon7JpVWUSGzX43K8qPDPfrXWITVzO5Q=w800",
"https://lh3.googleusercontent.com/BkkB_dz1z4OrUWesaqoSCUJK9Cy-6tZEFWSHHYS_vjaRRSxsWq-N5DXpdEKRUxFm4WOj28vZR_1J7ds-E9kd2VX-TOJabey818HUW2KHscOBBXLE9M8ICO9onpJmbCz3F6z2EicaSQ=w800",
"https://lh3.googleusercontent.com/AxB0G04FYMxkv393UboFs8ONTedl5anI7mExqN2YmQWyeXhLFdxfTiZ8sP9AUHcMqkMvF0mfwPTPjnZLmBQ9pyMmxMdSvuU3zMMEa1KezbJg7VKcWDl_h8zmtwsHX9SinUOka8ON6Q=w800"
]
"developer": "Candy Rufus Games",
"version": "2.2.10.4",
"size": "26.33MB",
"added": "2020-06-11",
"problem": false,
"release": "14/12/2016",
"gender": [
"Ação",
"Aventura"
]
}
]
}
JavaScript
/* GETTING JSON */
let requestURL = '/xteste.json';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json'; request.send();
// Ao carregar a requisição, chamar todas as funções.
request.onload = function() {
let jogos = request.response;
// Chamando as funções
showJogos(jogos);
// Injeção de conteúdo.
function showJogos(jsonObj) {
let jogos = jsonObj.jogos;
for (let i = 0; i < jogos.length; i++) {
// Verifica se não há algum problema com o jogo no banco de dados, para então injeta-lo na página.
if(jogos[i].problem == false){
const card = document.createElement('div');
card.classList.add('col-6', 'col-md-3', 'col-lg-2', 'mb-3', 'mt-1');
card.innerHTML += `
<!-- card -->
<div class="col-6 col-md-3 col-lg-2 mb-3 mt-1 p-0 cc">
<div class="card border-0 ml-0 mx-auto" style="width: 125px; height: 200px;" >
<a href=''><img class="rounded-lg" style="width: 100%; height: auto;" src="${jogos[i].icon}" alt="${jogos[i].title}" ></a>
<div class="container p-0 rounded">
<a href=''>
<h6 class="card-text text-muted text-truncate text-left">${jogos[i].title}</h6>
</a>
</div>
<button class="button bg-success rounded border-0">
<a href='' class="text-light">Baixar <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-down-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z"/>
</svg>
</a>
</button>
</div>
</div>
`;
/* SHOWING IN CONTENT DIV */
content.appendChild(card)
}
}
}
}