Javascript: отдельные json объекты со строками в html - PullRequest
Новая
       10

Javascript: отдельные json объекты со строками в html

1 голос
/ 18 апреля 2020

Итак, я загружаю на свою html страницу несколько json объектов (см. Изображение), но я хочу разделить их какой-то линией, например, синей линией на моем изображении. Есть ли способ? Мое изображение: https://i.stack.imgur.com/h3hUo.png

мой js код 

$.getJSON("http://newsapi.org/v2/top-headlines?country=gr&category=health&apiKey=APIKEY", function(data){

   $.each(data.articles,function(index,value){
       console.log(data);
       var author = value.author;
       if (author==null){
           author="No author";
       } 
       var title = value.title;
       var description = value.description;
       if(description==null){
        description ="No description";
       }
       var url = value.url;


    $('.output').append('<p class="author">'+author+'</p><h2 class ="title">'+title+'</h2><p 
    class="description">'+description+'</p><a class="url" href="'+url+'" >Read Article</a>'); //here i append the data to my page

   });

});

Ответы [ 2 ]

0 голосов
/ 19 апреля 2020

Попробуйте использовать тег hr в соответствии с рекомендациями @Duad и @Imarqs. Если вам не нужна синяя линия под последним элементом, попробуйте это. 

let arr=[
 {
   author:"A",
   title:"TitleA",
   url:"google.com"
 },
  {
   author:"B",
   title:"TitleB",
   url:"youtube.com"
 },
  {
   author:"C",
   title:"TitleC",
   url:"facebook.com"
 }
];
$.each(arr,(index,value)=>{
   let include=(index!=arr.length-1);
   $('.output').append(`<p class="author">${value.author}</p><h2 class ="title">${value.title}</h2><p 
    class="description"></p><a class="url" href="${value.url}" >Read Article</a>${include?"<hr>":""}`)
});
hr{
background-color:skyblue;
padding:1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="output"></div>
0 голосов
/ 19 апреля 2020 
$('.output').append('<p class="author">'+author+'</p><h2 class ="title">'+title+'</h2><p 
    class="description">'+description+'</p><a class="url" href="'+url+'" >Read Article</a><class='blue-color' hr>'); //here i append the data to my page

CSS

.blue-color {
 color: blue;
}

Я надеюсь, что это сработает. Hr тег нарисует горизонтальную линию

Если линия не станет синей Попробуйте заменить цвет на свойство background-color.

...