CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vue-component
coder
coder

Reputation: 642

How to display specified rows using vue js?

This is the data I obatined from the url. I need to print only the 2nd and the 4th row, 

{
    "status": "ok",
    "source": "n",
    "sortBy": "top",
    "articles": [
        {
            "author": "Bradford ",
            "title": "friends.",
            "url": "http: //",
            "urlToImage": "http://"
        },
        {
            "author": "Bradford  ",
            "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
            "url": "http: //",
            "urlToImage": "http://"
        },
              "author": "Bord  ",
            "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
            "url": "http: //",
            "urlToImage": "http://"
        },
             "author": "Brad  ",
            "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
            "url": "http: //",
            "urlToImage": "http://"
        }
    ]
}

My vue js script is given below. This is how I retrieve the value from the corresponding url

 <script>
    new Vue({
        el: '#feed' ,
        data: {
        articles: [],
        },
        mounted() {
        this.$nextTick(function() {
          var self = this;
          $.ajax({
                url: "https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=4db9d5d381a14ffcbca8e8a9aa8b864c",
                method: "GET",
                dataType: "JSON",
                success: function (e) {
                    if (e.status == 'ok') {
                        self.articles = e.articles;
                        console.log(e.articles)
                    }
                }, error: function(){
                console.log('Error occurred');
                }
            });
        })
        },
       })
</script>

MY HTML IS

<div id="feed">
<div v-for="post in articles" class="mke_">
  <div class="row">
      {{post.title}}
    </div>
</div>
</div>

Please help me to display only the 2nd and 4th articles[]? I am weak in js. So, it will great to help me out

Upvotes: 1

Views: 578

Answers (1)

Nisarg Shah
Nisarg Shah

Reputation: 14561

By 2nd and 4th row, I presume you mean that the elements at index 1 and 3. The simplest way of doing so would be to add a v-if binding with the following condition: articles.indexOf(post) == 1 || articles.indexOf(post) == 3.

new Vue({
  el: '#feed',
  data: {
    articles: [{
        "author": "Bradford ",
        "title": "friends.",
        "url": "http: //",
        "urlToImage": "http://"
      },
      {
        "author": "Bradford  ",
        "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
        "url": "http: //",
        "urlToImage": "http://"
      }, {
        "author": "Bord  ",
        "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
        "url": "http: //",
        "urlToImage": "http://"
      },
      {
        "author": "Brad  ",
        "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
        "url": "http: //",
        "urlToImage": "http://"
      }
    ]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<div id="feed">
  <div v-for="post in articles" v-if="articles.indexOf(post) == 1 || articles.indexOf(post) == 3" class="mke_">
    <div class="row">
      {{post.title}}
      <br/>
      <small>{{post.author}}</small>
    </div>
  </div>
</div>

In order to separate the UI from logic, you can use a computed for the purpose. The computed can filter the required values like: 

return this.articles.filter(t => 
    this.articles.indexOf(t) == 1 
    || this.articles.indexOf(t) == 3
);


new Vue({
  el: '#feed',
  data: {
    articles: [{
        "author": "Bradford ",
        "title": "friends.",
        "url": "http: //",
        "urlToImage": "http://"
      },
      {
        "author": "Bradford  ",
        "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
        "url": "http: //",
        "urlToImage": "http://"
      }, {
        "author": "Bord  ",
        "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
        "url": "http: //",
        "urlToImage": "http://"
      },
      {
        "author": "Brad  ",
        "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
        "url": "http: //",
        "urlToImage": "http://"
      }
    ]
  },
  computed: {
    filteredPosts() {
      return this.articles.filter(t => this.articles.indexOf(t) == 1 || this.articles.indexOf(t) == 3);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<div id="feed">
  <div v-for="post in filteredPosts" class="mke_">
    <div class="row">
      {{post.title}}
      <br/>
      <small>{{post.author}}</small>
    </div>
  </div>
</div>

Note: I've added in the post author to the display in order to make it easier to know the index of filtered items.

Update

As suggested by Bert, the filter can be improved to: 

return this.articles.filter((t, i) => 
    i == 1 || i == 3
);


new Vue({
  el: '#feed',
  data: {
    articles: [{
        "author": "Bradford ",
        "title": "friends.",
        "url": "http: //",
        "urlToImage": "http://"
      },
      {
        "author": "Bradford  ",
        "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
        "url": "http: //",
        "urlToImage": "http://"
      }, {
        "author": "Bord  ",
        "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
        "url": "http: //",
        "urlToImage": "http://"
      },
      {
        "author": "Brad  ",
        "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
        "url": "http: //",
        "urlToImage": "http://"
      }
    ]
  },
  computed: {
    filteredPosts() {
      return this.articles.filter((t,i) => i == 1 || i == 3);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<div id="feed">
  <div v-for="post in filteredPosts" class="mke_">
    <div class="row">
      {{post.title}}
      <br/>
      <small>{{post.author}}</small>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions