How to check comparison data from two json data?

Question

My json details to display details of a specific post

http://127.0.0.1:8000/listings/

{"data": {"pid": 109, "name": "Labs", "website": "service.com",  "status": true}

My json details for full profile information

http://127.0.0.1:8000/profile/

{"status": true, "data": {"basic": {"name": "Kuis", "is_new": false, "is_email_verified": false, "is_phone_verified": false}, "listings": [{"pid": 109, "nams": "Labs","created_at": "2018-02-14", "validity": "2019-06-29", "views": 2, "gstno": "09485481072", "is_featured": false },{"pid": 112, "nams": "Labs12","created_at": "2018-02-15", "validity": "2019-06-29", "views": 2, "gstno": "09499481072", "is_featured": false }], "total_listings": 2}}

So now I give an editing option. So, I need to check if pid goes to profile data? How can I achieve the same?

My vue js code

mounted() {
    var self = this;
    data = {};
    data['auth-token'] = this.authType;
    $.ajax({
        url: "http://127.0.0.1:8000/profile/",
        data: data,
        type: "POST",
        dataType: 'json',
        success: function (e) {
            if (e.status == 1) {
                self.listings = e.data.listings;
            }
        },
    });
    data = {};
    data['auth-token'] = this.authType;
    data['pid'] = this.pid;
    $.ajax({
        url: "http://127.0.0.1:8000/listings/",
        data: data,
        type: "POST",
        dataType: 'json',
        success: function (e) {
            if (e.status == 1) {
                self.data = e.data;
            }
        },
    });
},

I have data in data[]and all the data from profile in listings[].

I need to compare pidin is data[]present at listings[].

I need to do the following on the side HTML

<div if="data.pid == listings.pid"> Success </div> <div v-else> Failure</div>

I am new and know only the basics. Please help me find a solution.

Answer 1

, , :

function checkOccurence(data, listing) {
  let dataFound = false;
  for(let i = 0; i < listing.length; i++) {
    if (listing[i].pid === data.pid) {
      dataFound = true;
      break;
    }
  }

  return dataFound;
};

boolean success failure :

<div if="checkOccurence(data, listing)"> Success </div> <div v-else>Failure</div>

Answer 2

, , .

new Vue({
  el: '#app',
  data: {
    data: {},
    listing: []
  },
  computed: {
  	validatePID: function() {
    	var ret = false;
       for(var idx in this.listing) {
          if (this.listing[idx].pid == this.data.pid) {
              ret = true;
              break;
          }
       }

       return ret;
    }
   },
  mounted: function() {
  	this.data = {"pid": 109, "name": "Labs", "website": "service.com",  "status": true};
    this.listing.push({"pid": 109, "nams": "Labs","created_at": "2018-02-14", "validity": "2019-06-29", "views": 2, "gstno": "09485481072", "is_featured": false });
    this.listing.push({"pid": 112, "nams": "Labs12","created_at": "2018-02-15", "validity": "2019-06-29", "views": 2, "gstno": "09499481072", "is_featured": false });
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
 <span v-if="validatePID">test</span>
 <span v-else>test2</span>
</div>

Hide result

.

Answer 3

Define an existing method in your methods,

  methods: {
        exists: function() {
        var exist = false;
             var listings = self.listings;
             var data = self.data;
             for(var listing of listings) {
              if (listing.pid == data.pid) {
                  exist = true;
                  break;
              }
           }
           return exist;
        }
    }

And you should call a method like this,

   <div if="exists()"> Success </div> <div v-else> Failure</div>

Answer 4

Another possible solution using arrow functions might be

const matchingListItem = listings.find(listItem => listItem.pid === data.pid);

Or, if you don’t need the corresponding list item, and just want to find out if data.pid is contained in the list array, you can use this funtion

isDataInListings = (data, listings) => listings.some(item => item.pid === data.pid);