为什么我无法使用Jquery中的append函数将数据提取到HTML文件中?

时间:2019-01-16 13:45:52

标签: javascript jquery html json

由于某些原因,我似乎无法使用JQUERY从URL提取数据到我的html文件。请帮我。我直到初学者为止

This is my code

<html>
<head>
  <title> my program </title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="type/javascript">
$(document).ready(function() {

$.ajax({
url:"My "
 }).then(function(data) {

          for(i = 0;i<data.articles.length; i++)

      {

             $('#list').append(data.articles[i].title+"<br/>");
         $('#list').append(data.articles[i].author+"<br/>");
         $('#list').append(data.articles[i].urlToImage+"<br/>");
         $('#list').append(data.articles[i].url+"<br/>");
         $('#list').append(data.articles[i].publishedAt+"<br/>");
         $('#list').append(data.articles[i].description+"<br/>"+"<hr/>");
     }
   });
});
</script>
</head>
<body>
  <div>
<p id="list">title</p>
<p id="list">author</p>
<p id="list">url</p>
<p id="list">description</p>
<p id="list">publishedAt</p>
</div>

</body>

</html>

This is the result I get 这是我在浏览器中得到的结果:

标题

作者

url

说明

publishedAt

我无法将标题,作者等数据提取到我的html文件中。

This is the type of result I am trying to produce

1 个答案:

答案 0 :(得分:1)

id在html中必须唯一。由于您的p标签具有相同的ID,jquery可能只会选择其中一个-可能是第一个,也可能是最后一个。这可能不是您想要的。

所以我的建议是首先以独特的方式重命名ID。

假设数据具有填充的对象数组,请尝试

// HTML

<div id="list"></div>

// JS

// having this dataset

var data = {
    articles: [
        {
            title: 'title 1',
            author: 'author 1',
            urlToImage: 'urlToImage 1',
            url: 'url 1',
            publishedAt: 'publishedAt 1',
            description: 'description 1'
        },

        {
            title: 'title 2',
            author: 'author 2',
            urlToImage: 'urlToImage 2',
            url: 'url 2',
            publishedAt: 'publishedAt 2',
            description: 'description 2'
        }
    ]
}

var i; 


for(i = 0; i< data.articles.length; i++ ){

    var section  = data.articles[i].title + "<br>";
        section += data.articles[i].author + "<br>";
        section += data.articles[i].urlToImage + "<br>";
        section += data.articles[i].url + "<br>";
        section += data.articles[i].publishedAt + "<br>";
        section += data.articles[i].description + "<br> <hr>";
    $('#list').append(section);

}