We Keep Coding

how to GET and store specific values as a list from JSON data(URL) in javascript?

I tried several approches and none of them works. I think this is because I am using JSON returned by django DRF.
I want to create a list of IFSC using this JSON in Jquery in my HTML template itself.
This is how my api returns JSON for any queryset.
{
"count": 134,
"next": "http://127.0.0.1:8000/api/bankdetailapi/?limit=5&offset=5&q=ABHY",
"previous": null,
"results": [
{
"ifsc": "ABHY0065001",
"bank": {
"name": "ABHYUDAYA COOPERATIVE BANK LIMITED",
"id": 60
},
"branch": "RTGS-HO",
"address": "ABHYUDAYA BANK BLDG., B.NO.71, NEHRU NAGAR, KURLA (E), MUMBAI-400024",
"city": "MUMBAI",
"district": "GREATER MUMBAI",
"state": "MAHARASHTRA"
},
{
"ifsc": "ABHY0065002",
"bank": {
"name": "ABHYUDAYA COOPERATIVE BANK LIMITED",
"id": 60
},
"branch": "ABHYUDAYA NAGAR",
"address": "ABHYUDAYA EDUCATION SOCIETY, OPP. BLDG. NO. 18, ABHYUDAYA NAGAR, KALACHOWKY, MUMBAI - 400033",
"city": "MUMBAI",
"district": "GREATER MUMBAI",
"state": "MAHARASHTRA"
},
{
"ifsc": "ABHY0065003",
"bank": {
"name": "ABHYUDAYA COOPERATIVE BANK LIMITED",
"id": 60
},
"branch": "BAIL BAZAR",
"address": "KMSPM'S SCHOOL, WADIA ESTATE, BAIL BAZAR-KURLA(W), MUMBAI-400070",
"city": "MUMBAI",
"district": "GREATER MUMBAI",
"state": "MAHARASHTRA"
}
]
}
The code I tried:
$(document).ready(function(){
var value = $('#q').val()
$.getJSON("http://127.0.0.1:8000/api/bankdetailapi/?q="+ value, function(data){
var text = `IFSC: ${data.ifsc}`
})
)}
It throws error in browser console that Uncaught ReferenceError: text is not defined . I want to use this IFSC list as autocomplete suggestions.

$("#q").keyup(function(){
var value = $('#q').val()
$.getJSON("http://127.0.0.1:8000/api/bankdetailapi/?q="+ value, function(data){
var text = ['']
for (var i=0;i<data.results.length;++i){text.push(data.results[i].ifsc)}
// var text = `IFSC: ${data.results.ifsc}`
console.log(text)
By using push method and iterating on whole data i managed to get list of all IFSC values.

How do I update the shipping options at checkout in BigCommerce

I've written a custom app which uses a PHP server for the back end and the bigcommerce checkout/cart sdk with JS for the front end.
Basically this is what I want to do:
Retrieve Rates using my php app and a 3rd party api (This works)
Display said rates as selectable options (This works)
Update the checkout and consignment (This works but not 100%)
Update the cart shipping method and total (This is where I am stuck)
After I get the rates from the PHP server, I dynamically build the list's HTML.
I randomly assign shipping method id's (As I have no idea how this gets generated but it appears to be fairly random)
When I click on a shipping option this code runs (Please note that 'option' is a variable within a foreach loop
console.dir(checkoutObj);
if(checkoutObj.consignments.length < 1){
console.log('no consign');
} else {
var selectedShipping = checkoutObj.consignments[0].selectedShippingOption;
selectedShipping.cost = parseFloat(option['grandtotmrkup']);
selectedShipping.description = option['CarrierName'] + '-' + option['CarrierService'];
selectedShipping.id = this.value;
selectedShipping.type = 'weight_based_shipping';
checkoutObj.consignments[0].shippingCost = parseFloat(option['grandtotmrkup']);
checkoutObj.shippingCostBeforeDiscount = parseFloat(option['grandtotmrkup']);
checkoutObj.shippingCostTotal = parseFloat(option['grandtotmrkup']);
console.log('updated checkout obj');
console.dir(checkoutObj);
var updated = service.updateCheckout(checkoutObj);
console.log('updated');
console.dir(state.data.getCheckout());
console.log('updating consignment');
console.dir(
service.updateConsignment({'id':consignID,'shippingOptionId':shippingMethodId})
);
console.dir(state.data.getConsignments());
When it runs service.updateConsignment I get the following response for the consignments section of the object:
"consignments": [
{
"id": "5f732875d039f",
"shippingCost": 0,
"handlingCost": 0,
"couponDiscounts": [],
"discounts": [],
"lineItemIds": [
"4f557702-4f9d-45ec-943a-c72ea963ccc7"
],
"selectedShippingOption": {
"id": "4dcbf24f457dd67d5f89bcf374e0bc9b",
"type": "freeshipping",
"description": "Free Shipping",
"imageUrl": "",
"cost": 0,
"transitTime": "",
"additionalDescription": ""
},
"shippingAddress": {
"firstName": "1",
"lastName": "1",
"email": "",
"company": "",
"address1": "1 street",
"address2": "",
"city": "MITCHAM",
"stateOrProvince": "Victoria",
"stateOrProvinceCode": "VIC",
"country": "Australia",
"countryCode": "AU",
"postalCode": "3132",
"phone": "",
"customFields": [],
"shouldSaveAddress": true
},
"availableShippingOptions": [
{
"id": "9ba45e71fe66e1cd757f022dcae331b0",
"type": "shipping_pickupinstore",
"description": "Pickup In Store",
"imageUrl": "",
"cost": 0,
"transitTime": "",
"isRecommended": false,
"additionalDescription": ""
},
{
"id": "4dcbf24f457dd67d5f89bcf374e0bc9b",
"type": "freeshipping",
"description": "Free Shipping",
"imageUrl": "",
"cost": 0,
"transitTime": "",
"isRecommended": true,
"additionalDescription": ""
}
]
}
],
I'm not sure if it's because my shipping options aren't in the Available Shipping Options Section of the object?
Does anyone know how I can get my shipping methods in there? Or is this being caused because I append the methods dyanmically via HTML?
I'm new to BC so please excuse any ignorance.

I don't think you're going to be able to inject a shipping option into the checkout this way, I think you'd need to look at using the Shipping Methods API in your PHP app and then the options should be available as per usual.

Not able to read below JSON using Angular 7

I was not able to read below mentioned received JSON from Rest API.
{
"details": {
"id": 21,
"gstin": "27AACCG7831Q1Z0",
"entityName": "GENX ENTERTAINMENT LIMITED",
"entityPan": "AACCG7831Q",
"entityTan": "abhishek123",
"entityCin": "null",
"entityWebsite": null,
"natureOfBusiness": null,
"constitution": "\"Public Limited Company\""
},
"addresses": [
{
"id": 22,
"buildingName": "\"Solitaire Corporate Park\"",
"location": null,
"street": null,
"buildingNo": "\"S-14\"",
"state": "bihar",
"district": "\"\"",
"city": "\"\"",
"flateNo": "\"1\"",
"pincode": "\"400093\"",
"isPrimary": false
}
]
}
I want to use above data received in JSON format into a form.

Your question is not clear, but you can pass this values to a form using this :
const formValues = JSON.parse(yourJson);
this.form.values = formValues;

See The Stakblitz Code Below
stackblit_sampleCode
Hope this helps..!

Two fields in jQuery-ui autocomplete dropdown

I have an object that goes like this:
[{
"suburbName": "ABBOTSBURY",
"postCode": "2176",
"state": "NSW",
"country": "AU"
}, {
"suburbName": "ABBOTSFORD",
"postCode": "2046",
"state": "NSW",
"country": "AU"
}, {
"suburbName": "ACACIA GARDENS",
"postCode": "2763",
"state": "NSW",
"country": "AU"
}/*, etc */]
Where there may be some suburbs with the same suburbName but different postCodes and states.
I'd like to stick the suburbName and postcode together somehow in the autocomplete dropdown, either by just creating a new array with a string containing suburb and postcode or by using some special function for the source.
What do you think is the best way of going about this?

source expects an array, so you can use map:
$(myElement).autocomplete({
source: dataArray.map(function(val) {
return val.suburbName + " " + val.postCode;
})
});

Setting 3rd Level Nested Attribute on a Backbone Model

I'm having trouble changing the location $id on this Backbone model.
{
"approved": null,
"caption": "This is my photo!",
"created": 1393537913,
"location": {
"_id": {
"$id": 5
},
"address1": "155 West Street",
"city": "Bangkok",
"country": "THA",
"latitude": "13.136",
"longitude": "100.2068",
"postalCode": "10330",
"region": "AP"
}
}
I've tried:
model.set({"location":{"_id":{"$id": 6}}})
But that obviously overwrites the entire location object.
model.set({"location._id":{"$id":6}})
Creates a new attribute on the model, "location._id".
So, how can I dig in to the location to change that attribute?

You can do like this :
var location = model.get('location');
location._id = { "$id": 6 };