Preciso fazer um slide com request

[edsonbastos2]

Preciso fazer um slide, mais tenho que pegar as imagens de uma api, não estou conseguindo manipular o json, segue as instruções de como me ajudar, obrigado pela atenção.
https://pastebin.com/mg7ayiXE

[theandersonn]

@edsonbastos2 Como vc está fazendo para receber e tratar esses dados?

Pensei em algo assim, vê se lhe atende:

const api = fetch('https://dt11.pepblast.com/pzAlbums_php03/PSO/PSOApi.php?client=HTML&app=PLUGIN&m=pso.remix.getRemixPars&args={%22rid%22:%22x85in000149b85wn0lamsj%22,%22av%22:%22v1%22,%22esort%22:0,%22easc%22:0,%22getappelements%22:1,%22getinputusers%22:1,%22getpropsjs%22:1,%22getisfollower%22:1,%22usecreatoresort%22:1,%22enmax%22:120}');

const urlImg = 'https://movt11.pepblast.com/RMX_PHOTO/'
const extensaoImg = '.jpg';

api.then(r => r.json())
.then(data => {
    let info = data.getRemixApprovedElements.its_media;
    let arrayImg = [];
    
    info.forEach(function(img){
        image = urlImg + img.eid + extensaoImg;
        console.log(image);

        // https://movt11.pepblast.com/RMX_PHOTO/gu79w000149b85ww0dxy8n.jpg
        // https://movt11.pepblast.com/RMX_PHOTO/xy69t000149b85wt0cym8r.jpg
        // https://movt11.pepblast.com/RMX_PHOTO/ip59t000149b85wt0frm4u.jpg
        // https://movt11.pepblast.com/RMX_PHOTO/nh49p000149b85wp0uwn6i.jpg
        // https://movt11.pepblast.com/RMX_PHOTO/z8z8n000149b85wn0nm6lb.jpg
    });
});

[edsonbastos2]

Oá bom dia. Muito obrigado por ter me ajudado, era isso mesmo que eu estava tentando fazer, mais agora não estou conseguindo colocar essas imagens em um slide, teria como você me ajudar novamente nessa questão.

…

________________________________ De: Anderson Nascimento <notifications@github.com> Enviado: quarta-feira, 16 de outubro de 2019 19:35 Para: frontendbr/forum <forum@noreply.github.com> Cc: edsonbastos2 <edsonbastos2@hotmail.com>; Mention <mention@noreply.github.com> Assunto: Re: [frontendbr/forum] Preciso fazer um slide com request (#1570) @edsonbastos2<https://github.com/edsonbastos2> Como vc está fazendo para receber e tratar esses dados? Pensei em algo assim, vê se lhe atende: const api = fetch('https://dt11.pepblast.com/pzAlbums_php03/PSO/PSOApi.php?client=HTML&app=PLUGIN&m=pso.remix.getRemixPars&args={%22rid%22:%22x85in000149b85wn0lamsj%22,%22av%22:%22v1%22,%22esort%22:0,%22easc%22:0,%22getappelements%22:1,%22getinputusers%22:1,%22getpropsjs%22:1,%22getisfollower%22:1,%22usecreatoresort%22:1,%22enmax%22:120}'); const urlImg = 'https://movt11.pepblast.com/RMX_PHOTO/' const extensaoImg = '.jpg'; api.then(r => r.json()) .then(data => { let info = data.getRemixApprovedElements.its_media; let arrayImg = []; info.forEach(function(img){ image = urlImg + img.eid + extensaoImg; console.log(image); // https://movt11.pepblast.com/RMX_PHOTO/gu79w000149b85ww0dxy8n.jpg // https://movt11.pepblast.com/RMX_PHOTO/xy69t000149b85wt0cym8r.jpg // https://movt11.pepblast.com/RMX_PHOTO/ip59t000149b85wt0frm4u.jpg // https://movt11.pepblast.com/RMX_PHOTO/nh49p000149b85wp0uwn6i.jpg // https://movt11.pepblast.com/RMX_PHOTO/z8z8n000149b85wn0nm6lb.jpg }); }); — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://github.com/frontendbr/forum/issues/1570?email_source=notifications&email_token=AGS3SUUXZ3FLJAIK3OUFYITQO6CILA5CNFSM4JBEZUPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBOAHLQ#issuecomment-542901166>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGS3SUXKMC7XL4OIQOE6F6TQO6CILANCNFSM4JBEZUPA>.

[theandersonn]

@edsonbastos2 blz!

Posta o código da forma que você está tentando. Também a estrutura HTML do seu slider.

Caso esteja como muita dificuldade de como fazer, pesquise por:

createElement, appendChild

Porque da forma como eu postei acima você já tem o src montado das cinco imagens na variável image. blz?

A partir daí você já está dentro do loop.

O que precisa fazer é inserir atribuir esse src para a tag image do seu markup aplicar appendChild para colocar esse image como filho do li.

Notou que pode fazer por partes e ir inserindo um elemento dentro do outro?

[edsonbastos2]

Olá Anderson Nascimento. Muito obrigado pela ajudar, eu fiz mais ou menso isso que você me falou, mais vou manda os códigos para você da uma olha. HTML <!DOCTYPE html> <html lang="pt-br"> <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>Document</title> </head> <body> <div id="imageBg"> </div> <script src="app.js"></script> </body> </html> JAVASCRIPT /*Consumir API rest*/ const api = fetch('https://dt11.pepblast.com/pzAlbums_php03/PSO/PSOApi.php?client=HTML&app=PLUGIN&m=pso.remix.getRemixPars&args={%22rid%22:%22x85in000149b85wn0lamsj%22,%22av%22:%22v1%22,%22esort%22:0,%22easc%22:0,%22getappelements%22:1,%22getinputusers%22:1,%22getpropsjs%22:1,%22getisfollower%22:1,%22usecreatoresort%22:1,%22enmax%22:120}'); const urlImg = 'https://movt11.pepblast.com/RMX_PHOTO/' const extensaoImg = '.jpg'; api.then(resp => resp.json()) .then(data => { let info = data.getRemixApprovedElements.its_media; let arrayImg = []; info.forEach(function (img) { image = urlImg + img.eid + extensaoImg; let div = document.querySelector('#imageBg') let div2 = document.createElement('div') let slide = document.createElement('img') slide.src = image div2.appendChild(slide) div.appendChild(div2) console.log(image) }); });

…

________________________________ De: Anderson Nascimento <notifications@github.com> Enviado: quinta-feira, 17 de outubro de 2019 14:27 Para: frontendbr/forum <forum@noreply.github.com> Cc: edsonbastos2 <edsonbastos2@hotmail.com>; Mention <mention@noreply.github.com> Assunto: Re: [frontendbr/forum] Preciso fazer um slide com request (#1570) @edsonbastos2<https://github.com/edsonbastos2> blz! Posta o código da forma que você está tentando. Também a estrutura HTML do seu slider. Caso esteja como muita dificuldade de como fazer, pesquise por: createElement, appendChild Porque da forma como eu postei acima você já tem o src montado das cinco imagens na variável image. blz? A partir daí você já está dentro do loop. O que precisa fazer é inserir atribuir esse src para a tag image do seu markup aplicar appendChild para colocar esse image como filho do li. Notou que pode fazer por partes e ir inserindo um elemento dentro do outro? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://github.com/frontendbr/forum/issues/1570?email_source=notifications&email_token=AGS3SUUDJCZGLDEEMWJTDJ3QPCHAPA5CNFSM4JBEZUPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBQWT6Q#issuecomment-543255034>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGS3SUQJULTC7I3PS7HX7MTQPCHAPANCNFSM4JBEZUPA>.

[theandersonn]

A ideia é essa. Parabéns!
Aqui abriu essa marcação:

<div id="imageBg">
    <div>
        <img src="https://movt11.pepblast.com/RMX_PHOTO/gu79w000149b85ww0dxy8n.jpg">
    </div>
    
    <div>
        <img src="https://movt11.pepblast.com/RMX_PHOTO/xy69t000149b85wt0cym8r.jpg">
    </div>
    
    <div>
        <img src="https://movt11.pepblast.com/RMX_PHOTO/ip59t000149b85wt0frm4u.jpg">
    </div>
    
    <div>
        <img src="https://movt11.pepblast.com/RMX_PHOTO/nh49p000149b85wp0uwn6i.jpg">
    </div>
    
    <div>
        <img src="https://movt11.pepblast.com/RMX_PHOTO/z8z8n000149b85wn0nm6lb.jpg">
    </div>
</div>

Daqui em diante é a parte de animar o slide dentro dos requisitos do seu briefing.

[edsonbastos2]

Opa tudo bem ? Muito obrigado novamente, vou tentar aqui.

…

________________________________ De: Anderson Nascimento <notifications@github.com> Enviado: quinta-feira, 17 de outubro de 2019 16:16 Para: frontendbr/forum <forum@noreply.github.com> Cc: edsonbastos2 <edsonbastos2@hotmail.com>; Mention <mention@noreply.github.com> Assunto: Re: [frontendbr/forum] Preciso fazer um slide com request (#1570) A ideia é essa. Parabéns! Aqui abriu essa marcação: <div id="imageBg"> <div> <img src="https://movt11.pepblast.com/RMX_PHOTO/gu79w000149b85ww0dxy8n.jpg"> </div> <div> <img src="https://movt11.pepblast.com/RMX_PHOTO/xy69t000149b85wt0cym8r.jpg"> </div> <div> <img src="https://movt11.pepblast.com/RMX_PHOTO/ip59t000149b85wt0frm4u.jpg"> </div> <div> <img src="https://movt11.pepblast.com/RMX_PHOTO/nh49p000149b85wp0uwn6i.jpg"> </div> <div> <img src="https://movt11.pepblast.com/RMX_PHOTO/z8z8n000149b85wn0nm6lb.jpg"> </div> </div> Daqui em diante é a parte de animar o slide dentro dos requisitos do seu briefing. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://github.com/frontendbr/forum/issues/1570?email_source=notifications&email_token=AGS3SUQWECA35FFKIL7VOTLQPCTWHA5CNFSM4JBEZUPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBRBCBA#issuecomment-543297796>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGS3SUVUJ2JKHRMPEF6X3ODQPCTWHANCNFSM4JBEZUPA>.