从http请求js显示为div元素

kcrjzv8t 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(257)

我有个问题，如果有人能帮我解决这个问题，我会非常感激。我是javascript新手，我向服务器发出http请求以获取一些数据，现在我想用html将数据显示到div中。我尝试使用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提供的图像和标题在html中显示从api到div的数据。有人能帮我吗？
当做

Api JavaScript Html

来源：https://stackoverflow.com/questions/68544818/show-into-div-elements-from-http-request-js

1条答案

按热度按时间

b4wnujal1#

根据您的评论，假设返回的数据为以下形式：

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>

赞(0）回复(0）举报 2021-09-13

我来回答

从http请求js显示为div元素

1条答案

相关问题

热门标签

最新问答