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

Question

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.

you can't skip `results` property of `data`, and the fact that `data.results` is an Array ... so, `data.results[0].ifsc` `data.results[1].ifsc` and `data.results[2].ifsc` ? — Jaromanda X, Jun 28 '21 at 15:17
Given your own example, `ifsc` is not at the root level, it's inside `results` — freedomn-m, Jun 28 '21 at 15:17
though ... why you'd get `text is not defined` is a mystery - there's absolutely NO reference to any variable or property called `text` in the code you posted — Jaromanda X, Jun 28 '21 at 15:19
*other language, not for Jquery* - jquery isn't a language - it's *a fast* (very debatable), *small, and feature-rich JavaScript library* — Jaromanda X, Jun 28 '21 at 15:21
Your code, as provided, would give `text` === `"IFSC: undefined"`. Please read [mcve] - we can't reproduce your issue if you give us different code — freedomn-m, Jun 28 '21 at 15:39
my apologies for calling Jquery as language. i wanted to say I didnt ind any solution in Jquery. — Jay Sardar, Jun 28 '21 at 15:42
in console log 5 json objects are returned , when i run the getJson @freedomn-m — Jay Sardar, Jun 28 '21 at 15:45
Please read: [What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) — freedomn-m, Jun 28 '21 at 15:47
What's the actual problem? (other than some terminology). Are you looking for the [for](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) statement to loop through your `results`? — freedomn-m, Jun 28 '21 at 15:49
i dont know how i exactly want them. I am using autocomplete widget. For that i want to pass list of IFSC values — Jay Sardar, Jun 28 '21 at 15:55
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push — freedomn-m, Jun 28 '21 at 15:59
so i can create a list by using PUSH method. i will get back once i implemented this — Jay Sardar, Jun 28 '21 at 16:03

score 0 · Accepted Answer · answered Jun 28 '21 at 16:40

0

       $("#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.

answered Jun 28 '21 at 16:40

Jay Sardar

19
7

Always better to code it yourself than be spoon fed. Can be just `var text=[];` to initialise the array. You can also use `var text = data.results.map(x=>x.ifsc)` for some shorthand. – freedomn-m Jun 28 '21 at 16:43
i am not comfortable with map. but i guess i have to start working on it. thanks again @freedomn-m – Jay Sardar Jun 28 '21 at 17:23
That's one of the reasons I suggested the `for` + `push` loop (first). `map` is shorthand for your `for` loop and array generation. It allows you to convert (or "map") from one format (an array with multiple properties) to an other format (an array with a single property) nice and easily. Build up your skills bit by bit and understand them as you go, rather than dive in and get confused :) – freedomn-m Jun 29 '21 at 15:37

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

1 Answers1