How to get value of json web API using VueJS

Question

I am new to Vue.JS. Actually I am trying to get Name of bank by typing routing number.

API: https://www.routingnumbers.info/api/name.json?rn=011103093

export default {
 data: function () {
 return {
 picker: new Date().toISOString().substr(0, 7),
 resultsArray: {
 'name' : '',
 'message' : '',
 'code' : '',
 'rn' : ''
 },
 }
 }
 }
methods: {
 /* searchBasedOnMonthAndType() {
 let app = this;
 app.modeldailog = false
 app.rows = [];
 app.renderInvoicesBasedOnMonth(app.picker);
 },*/
 getBankName() {
 let app = this;
 app.rows = [];
 var rn = '011103093';
 $.ajax({
 url: 'https://www.routingnumbers.info/api/name.json?rn=' + rn,
 success(res) {
 if (res.results != null) {
 app.resultsArray = res.results;
 } else {
 // console.log(app.resultsArray);
 // console.log("test after");
 alert("data not fetched");
 }
 }
 });
 },
}
<label>Routing Number</label>
 <input type="text" name="routingNo" v-validate="'required|numeric'" v-model="paymentinfo.routing_no" class="form-control input-sm" v-on:keyup="getBankName();">
<label>Bank Name</label>
<input type="text" name="chck_bank_name" v-validate="'required'" class="form-control input-sm" v-bind:value="resultsArray.name">

I am getting Ajax response null. Everytime else part is being executed.

Answer 1

Maybe you typo in options for $.ajax method. Try this:

getBankName() {
 let app = this;
 app.rows = [];
 var rn = '011103093';
 $.ajax({
 url: 'https://www.routingnumbers.info/api/name.json?rn=' + rn,
 success: (res) => {
 if (res != null) {
 app.resultsArray = res;
 } else {
 // console.log(app.resultsArray);
 // console.log("test after");
 alert("data not fetched");
 }
 }
 });
},

FYI: result of that api call is not array. it's like so:

{"name": "TD BANK NA", "message": "OK", "code": 200, "rn": "011103093"}

Answer 2

Looks like you should use something like this:

$.ajax(...).done(data => {
 console.log(data)
}).fail(() => {
 console.log('fail')
})

P.S. It's better to use const vm = this; instead of let app = this;. It's de-facto standart in Vue.js