Stuck in fetch JS

Hello, I'm new to Javascript and I'm stuck with my JS code.
I used fetch to reach my info and got it when I console logit but can't place the pics on my Html page. The pics are stored in an Array and I think I should use a for each code but can't manage it.
See my JS code below. If someone could give me a hint I would be very grateful.
Thanks in advance Hindrik

const button = document.querySelector("button");
const header = document.querySelector("h2");
button.addEventListener("click", () => {
fetch("http://172.104.246.137:8083/")
.then(result => result.json())
.then(data => {
console.log(data);

});

    });

});

Comments

[Tobias Nickel]

what does your data looks like? can you send a json example?

by the way, please add 3 backticks before and after your code snipped, (it is markdown format). then your code is easyer to read on the internet.

[hindrik40]

Thanks for your comment, will do that in the future

[hindrik40]

Problem solved:)

[hindrik40]

Here comes the right code that solved everything
´const button = document.querySelector("button");
const header = document.querySelector("h2");
button.addEventListener("click", () => {
fetch("172.104.246.137:8083/")
.then(result => result.json())
.then(data => {
console.log(data);
data.forEach(function(obj){
console.log(obj);
console.log(obj.url);
let img = document.createElement('img');
img.src = obj.url;
document.body.appendChild(img);

        })



    });       


    });

[hindrik40]

I know it's an array with tree pictures but don't know how to show them on the HTML page. I thought that I could use a for each loop but don't know how to catch the pictures in the array and Im really frustrated most because my knowledge is so bad.

[hindrik40]

(3) [{…}, {…}, {…}]
0: {filename: "1280px-Morning_at_Tham_Sakoen.jpg", caption: "Morning at Tham Sakoen National Park, Phayao Province, Thailand", attribution: "BerryJ, CC BY-SA 4.0 creativecommons.org/licenses/by-sa..., via Wikimedia Commons", about: "commons.wikimedia.org/wiki/File:Mo...", url: "upload.wikimedia.org/wikipedia/com...}
1: {filename: "Good_Morning_From_the_International_Space_Station.jpg", caption: "NASA astronaut Scott Kelly took this photograph of a moonrise over the western united states.", attribution: "Scott Kelly, Public domain, via Wikimedia Commons", about: "commons.wikimedia.org/wiki/File:Go...", url: "upload.wikimedia.org/wikipedia/com...}
2: {filename: "Morning_in_Langtang.jpg", caption: "A view of Langtang National Park from Laurebina-La Pass, Nepal", attribution: "Q-lieb-in, CC BY-SA 4.0 creativecommons.org/licenses/by-sa..., via Wikimedia Commons", about: "commons.wikimedia.org/wiki/File:Mo...", url: "upload.wikimedia.org/wikipedia/com...}
length: 3
proto: Array(0)

[Pacharapol Withayasakpunt]

header.innerText doesn't work? What are the code you have tried?

[hindrik40]

Thanks for your suggestion I have tried alert append and for each and I think for each is the right one but how to catch pictures in the data array?/H