How to display specified rows using vue js?

Question

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

How do you determine that you need 2nd and 4th rows?

Sui Dream
– Sui Dream

2017-10-21 16:08:17 +00:00
Commented Oct 21, 2017 at 16:08 — Sui Dream
– Sui Dream, Commented Oct 21, 2017 at 16:08

Nisarg Shah · Accepted Answer · 2017-10-21 18:16:17Z

2

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>

edited Oct 21, 2017 at 18:16

answered Oct 21, 2017 at 16:09

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

coder Over a year ago

No sir, I need to print all the values of articles array.

coder Over a year ago

In this example { "author": "Bradford ", "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://" }

Nisarg Shah Over a year ago

In the question you've written: I need to print only the 2nd and the 4th row. What do you mean by that??

coder Over a year ago

Please check that url. There are many datas. My objective is to print only few of these

Bert Over a year ago

indexOf is unnecessary here. The filter callback receives the index as a parameter. (t,i) => i == 1 || i == 3

|

Collectives™ on Stack Overflow

How to display specified rows using vue js?

1 Answer 1

Update

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related