How to filter multiple JSON data using vuejs?

Question

I would like to create a simple web apps that can display all json data and user can filter it?

here it my code I am using Vue 2

index.html

<div id="app">    
    <input type="input" id="txt-search" v-model="mySearch">
   <select>
      <option :value="post.id" v-for="post in searchBook"
              >{{post.id}}</option>
    </select>
</div>

script.js

var json_data = 'jsonfile.json'
var app = new Vue({

  el: '#app',
  data: {  
    posts: null,
    mySearch:''  
  },

  created: function () {
    this.fetchData()
  },

  methods: {
    fetchData: function () {
      var xhr = new XMLHttpRequest()
      var self = this
      xhr.open('GET', json_data)
      xhr.onload = function () {
        self.posts = JSON.parse(xhr.responseText)
      }
      xhr.send()
    }
  },
computed: {
    searchBook() {
        return this.mySearch ? this.posts.filter(post => {
            return post.title.includes(this.mySearch);
          })
        : this.posts;
    }
}
})

It only filter title data

post.title.includes(this.mySearch)

Is it posible to filter all json data like

post.*.includes(this.mySearch)

BigLiao · Accepted Answer · 2022-07-11 07:21:40Z

2

function filterArray(arr, keyword) {
  if (!keyword) return arr;
  return arr.filter(obj =>
    Object.values(obj)
      .some(value => typeof value === 'string' && value.includes(keyword))
  );
}

Usage:

computed: {
    searchBook() {
        return filterArray(this.posts, this.mySearch);
    }
}

answered Jul 11, 2022 at 7:21

BigLiao

5613 silver badges10 bronze badges

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

Comments

TymoteuszLao · Accepted Answer · 2022-07-11 06:42:32Z

0

It is but is a little complicated. First, you must extract all the values from the object and filter every record to check if it contains the searched phrase.

Example:

const posts = [
  {title: 'title1', author:'author1', comment: 'comment1'},
  {title: 'foo', author:'author2', comment: 'comment2'},
  {title: 'title3', author:'bar', comment: 'comment3'},
]

const serchedPhrase = 'author';

const filteredData = posts.filter((e) => {
  const values = Object.keys(e).map(val => e[val]);
  const filteredValues = values.filter((el) => el.includes(serchedPhrase));
  return filteredValues.length > 0;
});

console.log(filteredData);

answered Jul 11, 2022 at 6:42

TymoteuszLao

9541 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to filter multiple JSON data using vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related