CODEWITHSUNDEEP
javascriptvue.js
David
David

Reputation: 81

how to select specific json data and store it into an array in Vue Js?

I am facing issue to store category SINGLES related data into an array and then use this array to display show data.Basically, I just want to store data that is only belong to category "SINGLES" from json file that I named it "data.json" into an array.Can anyone help me please. I would really appreciate that. Index.html

<div id="app">
<div class="col-lg-4 col-sm-6" v-for="model in jsonSingleData">
 <div class="beeton-models-box">
<div class="image-holder">
</div>
<div class="text-box">
<h3>{{model.title}}</h3>
<p>{{model.bedrooms}}</p>

</div>
</div>
</div>
</div>

script.js 

var vm = new Vue({

el:'#app',
data:{

    jsonSingleData:[]



},
created:function(){
   this.fetchDataAll();


},

methods:{


fetchDataAll: function(){

    var url="data.json";
    axios.get(url)
    .then(function(res){

     res.data.models.forEach(single=>{

            if(single.category=='SINGLES')
            {


                vm.jsonSingleData=single;
                console.log(single);



            }


        });

    });

}

The below is my json file. data.json 

{
    "models": [
      {
        "title": "IRIS",
        "project": "ABC",
        "category": "SINGLES",
        "bedrooms": 3

      },
      {
        "title": "LILAC",
        "project": "ABC",
        "category": "DOUBLE",
        "bedrooms": 4

      },
      {
        "title": "ASTER",
        "project": "ABC",
        "category": "SINGLES",
        "bedrooms": 4

      }
    ]
  }

Upvotes: 0

Views: 540

Answers (1)

Mojtaba
Mojtaba

Reputation: 5004

Looks like your method is missing some points. Also, you are missing a } at the end.

Try this:

fetchDataAll: function(){
    var vm = this;
    var url="data.json";
    axios.get(url)
    .then(function(res){

     res.data.models.forEach((single)=>{

            if(single.category=='SINGLES')
            {

                vm.jsonSingleData.push(single);
                console.log(single);

            }

        });

    });

}

Upvotes: 3

Related Questions