How do i when click button show results in json file with vue?

Question

Yes me again!

I want to pull the data from the json file when I fill in the required fields and press the button.

For example, let's write the developer part to the jobs section. then select istanbul as an option and click Find!.

var app = new Vue({
  el: "#app",
  data: {
    founded: [],
    search: ""
  },
  created() {
    fetch("job.json")
      .then(res => {
        return res.json();
      })
      .then(res => {
        this.founded = res.items;
      });
  },
  computed:{
      filteredFounded: function(){
          return this.founded.filter((items)=> {
              return items.positionName.match(this.search)
          });
      }
  }
});

    <div class="header">
        <h4>Get Job</h4>
    </div>



    <div id="app" class="nested">
        <div class="card w-50">
            <div class="search">
                <input type="text" class="job" v-model="search" placeholder="Job...">
                <select name="" class="city" id="">
                    <option value="Seçiniz">Seçiniz</option>
                    <option value="İstanbul">İstanbul</option>
                    <option value="Ankara">Ankara</option>
                    <option value="İzmir">İzmir</option>
                    <option value="Çanakkale">Çanakkale</option>
                </select>
            </div>

            <div class="find">
                <button>Find!</button>
            </div>

            <div class="card-body" v-for="items in filteredFounded">
                <h5 class="card-title">{{items.companyName}}</h5>
                <p class="card-text">{{items.positionName | to-uppercase}}</p>
                <p class="card-text">{{items.cityName}}</p>
                <p class="card-text">{{items.townName}}</p>
                <p class="card-text">{{items.distance}}</p>
                <a href="#" class=" btn-primary">Go!</a>
            </div>
        </div>
    </div>

    <script src="script.js"></script>

Can you explain what the problem is?

Sujil Maharjan
– Sujil Maharjan

2018-09-01 15:28:55 +00:00
Commented Sep 1, 2018 at 15:28 — Sujil Maharjan
– Sujil Maharjan, Commented Sep 1, 2018 at 15:28

Stock Overflaw · Accepted Answer · 2018-09-01 17:15:12Z

1

If I understand your issue:

the view updates on each form change since you bound the card-body repeating div directly to the filtering process, so the "Find!" button isn't used
you don't consider the city selection

To fix these, bind a model to the city selector, and declare separate variables for the JSON data and for the selected data:

<select name="" class="city" id="" v-model="city">

and:

data: {
  search: "",
  sourceJobs: [],
  selectedJobs: [],
  city: ""
}

Then put you JSON data in sourceJobs on creation:

fetch("job.json").then(function (res) {
  this.sourceJobs = res.json();
});

Side note: this architecture will not be viable for large JSON data, maybe you should consider filtering data through a call to your back-end API... but that's not the current question.

Now that your form data is bound to data.search and data.city, and that your pool of jobs is stored in data.sourceJobs, you want to have a method (no more computed) to filter data.sourceJobs and copy the resulting subset in data.selectedJobs:

methods: {
  selectJobs: function () {
    this.selectedJobs = this.sourceJobs
      .filter((job) => {
        return job.cityName === this.city && job.positionName.match(this.search);
      })
  }
}

Finally, call this method when the "Find!" button is clicked:

<button v-on:click="selectJobs">Find!</button>

In case you change you architecture to go for an API call to do the filtering, then you just need to remove that created part and do the API call from within the selectJobs method.

Side, unrelated note: find/found/found (successful result of searching) vs. found/founded/founded (create, build, set a base for something - a city, a company...).

answered Sep 1, 2018 at 17:15

Stock Overflaw

3,3411 gold badge15 silver badges14 bronze badges

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

3 Comments

Ömer Doğan Over a year ago

I will try this solution that you suggested, my case is: when I write the necessary info into the gaps,- for example job for one gap and for the other gap the city name- I want to see the jobs in that city.

Stock Overflaw Over a year ago

I never used Vue but I took your code and played with this JSFiddle, I believe it works as intended.

Ömer Doğan Over a year ago

i tryed and failed with your solution :/ but you gave me an idea and its worked. but there is many deficient.

Collectives™ on Stack Overflow

How do i when click button show results in json file with vue?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related