Блог

Главная - Вопросы по программированию - Показать в div элементы из http — запроса js

Показать в div элементы из http — запроса js

#javascript #html #api

Вопрос:

У меня есть проблема, и я был бы очень признателен, если бы кто-нибудь мог мне в этом помочь. Я новичок в javascript, и я сделал HTTP-запрос на сервер, чтобы получить некоторые данные, и теперь я хочу отобразить данные в div в HTML. Я попытался использовать createElement для отображения текста и изображения того, что я хочу видеть в HTML, но безуспешно. Кто-нибудь, пожалуйста, может мне помочь? Заранее спасибо, что уделили мне время.

код js

 var displaySoccerApi = document.getElementById("socceApi");

const api_url =
  "https://mysoccerapi.com";

// Defining async function
async function getapi(url) {
  // Storing response
  const response = await fetch(url);

  // Storing data in form of JSON
  var data = await response.json();
  console.log(data);
  //   if (response) {
  //     console.log("data here");
  //   }
}
// Calling that async function
getapi(api_url);

HTML

 <body>
    <div id="soccerApi"></div>
</body>

Все, что я хочу, это показать данные из API в div в HTML с изображением и заголовком, которые предоставляет API. Кто-нибудь, пожалуйста, может мне помочь?

С уважением

Комментарии:

1. указанный URL-адрес не существует, и никто не знает структуру возвращаемых данных. Пожалуйста, добавьте достаточно подробностей, чтобы другие могли получить ответ

2. Привет, спасибо за ваше сообщение. Данные из API являются локальными, и это просто массив с объектами, который имеет 2 ключа, 1 заголовок, 1 img, что-то вроде этого: const soccer = [ { img: » demo.jpg «, название: «Футболист», },

Ответ №1:

Предполагая, основываясь на вашем комментарии, что возвращаемые данные имеют форму:

 response=[
    {title:'Hello World',img:'/images/image1.jpg'},
    {title:'Goodbye World',img:'/images/image2.jpg'},
    {title:'Other text',img:'/images/image3.jpg'}
];

простая forEach петля

 response.forEach( obj=>{
    /*
        create new DOM elements
    */
    let div=document.createElement('div');
    let h1=document.createElement('h1');
    let img=new Image();
    
    div.append(h1);
    div.append(img);
    
    /*
        assign content from api data
    */
    h1.innerHTML=obj.title;
    img.src=obj.img;

    /*
        add to DOM
    */
    displaySoccerApi.append( div );
})

Например: Рабочий фрагмент, чтобы показать, возможно, как использовать вышеуказанное

   var displaySoccerApi=document.getElementById('socceApi');


  var response=[
    {title:'West Bromwich Albion',img:'https://assets-sports.thescore.com/soccer/team/78/logo.png'},
    {title:'West Ham United',img:'https://assets-sports.thescore.com/soccer/team/65/logo.png'},
    {title:'Manchester City',img:'https://i2.wp.com/dxugi372p6nmc.cloudfront.net/ronaldo/current/256x256/8456/teamlogo.png'}
  ];


  response.forEach( obj=>{
    let div=document.createElement('div');
    let h1=document.createElement('h1');
    let img=new Image();

    div.append(h1);
    div.append(img);

    h1.innerHTML=obj.title;
    img.src=obj.img;
    displaySoccerApi.append( div );
  }) 
 <div id='socceApi'></div>

Комментарии:

1. Большое спасибо за ваше время, я действительно ценю это. Хорошего вам дня впереди.

2. да, так оно и было. большое вам спасибо, я отметил ваш ответ как правильный. Огромное спасибо.

Метки: