Retrieving each value from the array of objects ajax

Question

controller

public function ajaxData(){

            $country_id=$this->input->post('country_id',true);

            $this->load->model('country_m');
            $data['states']=$this->country_m->getStates($country_id);

            echo json_encode($data);
            $this->load->view('onlineappointment.tpl',$data,TRUE);
  }

ajax

$(document).ready(function(){

    $('#country').on('change',function(){
        var countryID = $(this).val();
        // alert(countryID);
        if(countryID){
            $.ajax({
                type:'POST',
                url:'http://localhost/new_jivaamri/index.php/OnlineAppointment123/ajaxData',
                data:'country_id='+countryID,
                success:function(html){
                       console.log(html);
                       console.log(typeof html);

                        var obj2 = JSON.parse(html);

                       $('#state').html(html);

                    $('#city').html('<option value="">Select state first</option>'); 

                }
            }); 
        }else{
            $('#state').html('<option value="">Select country first</option>');
            $('#city').html('<option value="">Select state first</option>'); 
            $('#address').html('<option value="">Select state first</option>'); 

        }
    });

I am getting the output for ajax response like

{"states":[{"state_id":"45","state_name":" Kabul","country_id":"1","active":"1"},{"state_id":"46","state_name":"Kandahar","country_id":"1","active":"1"},{"state_id":"47","state_name":"Herat","country_id":"1","active":"1"},{"state_id":"48","state_name":"Mazar-i-Sharif","country_id":"1","active":"1"},{"state_id":"49","state_name":"Kunduz","country_id":"1","active":"1"},{"state_id":"50","state_name":"Taloqan","country_id":"1","active":"1"},{"state_id":"51","state_name":"Jalalabad","country_id":"1","active":"1"},{"state_id":"52","state_name":"Puli Khumri","country_id":"1","active":"1"}]}

But how do I retrieve the state name

You need to iterate over the states array in your *obj2*... do you understand the code and what happens when you use JSON.parse()? — Rob, Dec 19 '16 at 07:33
The first one would be under `obj2.states[0].state_name`, and then `obj2.states[1].state_name` till `obj2.states.length` — Icepickle, Dec 19 '16 at 07:34
Thankyou so much.....Yeah i got the output but how do i display the state_name in select option value in javascript — user5370838, Dec 19 '16 at 07:42

Dave · Accepted Answer · 2016-12-19T08:24:30.000

1

Parse response:

JSON.parse()

then get state name:

parsed.states[index].state_name

Edit: How to show on option in select.

HTML:

<select id="state_select"></select>

JAVASCRIPT

var option = '';
for (var i = parsed.states.length - 1; i >= 0; i--) {
    options += "<option value=\""+parsed.states[i].state_name+"\">"+parsed.states[i].state_name+"</option>";
}

document.getElementById('state_select').innerHTML = options;

Working demo

var json = '{"states":[{"state_id":"45","state_name":" Kabul","country_id":"1","active":"1"},{"state_id":"46","state_name":"Kandahar","country_id":"1","active":"1"},{"state_id":"47","state_name":"Herat","country_id":"1","active":"1"},{"state_id":"48","state_name":"Mazar-i-Sharif","country_id":"1","active":"1"},{"state_id":"49","state_name":"Kunduz","country_id":"1","active":"1"},{"state_id":"50","state_name":"Taloqan","country_id":"1","active":"1"},{"state_id":"51","state_name":"Jalalabad","country_id":"1","active":"1"},{"state_id":"52","state_name":"Puli Khumri","country_id":"1","active":"1"}]}';

var parsed = JSON.parse(json);

var options = '';
for (var i = parsed.states.length - 1; i >= 0; i--) {
    options += "<option value=\""+parsed.states[i].state_name+"\">"+parsed.states[i].state_name+"</option>";
}

document.getElementById('state_select').innerHTML = options;

<select id="state_select"></select>

edited Dec 19 '16 at 08:24

answered Dec 19 '16 at 07:34

Dave

2,764
2
15
27

Really helped a lot...Yeah i got the output but how do i display the state_name in select option value in javascript – user5370838 Dec 19 '16 at 07:52
@user5370838 check update. – Dave Dec 19 '16 at 08:24
Dave Sir......i m really thankful to you....since i was new to ajax...i was really feeling difficult to populate the state...thankyou so much....:-) – user5370838 Dec 19 '16 at 09:18
Hello sir when i select the states i am getting the below error in my console log Uncaught SyntaxError: Unexpected token A in JSON at position 0 at JSON.parse () at Object.success (OnlineAppointment123:199) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at A (jquery.min.js:4) at XMLHttpRequest. – user5370838 Dec 19 '16 at 10:06
Comment line `// JSON.parse(html)` and update question - show me what is `console.log(html)` and `console.log(typeof html)` – Dave Dec 19 '16 at 11:54
console.log(html) gives the state based on country_id and console.log(typeof html); gives string in console – user5370838 Dec 19 '16 at 12:19
Then your `html` is not valid JSON if is it only state. – Dave Dec 19 '16 at 13:18
hmm i have to populate state city and address in select – user5370838 Dec 19 '16 at 13:34

Retrieving each value from the array of objects ajax

1 Answers1