CODEWITHSUNDEEP
javascriptphpcodeigniter
Jithin Varghese
Jithin Varghese

Reputation: 2228

value from codeigniter controller to view and display inside javascript variable as array

I have a textbox with autocomplete functionality. My Code is,

<script>
  $(function() {
    var items = [ 'France', 'Italy', 'Malta', 'England', 
        'Australia', 'Spain', 'Scotland' ];

    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#skills" )
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          response( $.ui.autocomplete.filter(
            items, extractLast( request.term ) ) );
        },
        focus: function() {
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
      });
  });
</script>

The above code is working fine. Now the problem is, I want to display values from database instead of var items = [ 'France', 'Italy', 'Malta', 'England', 'Australia', 'Spain', 'Scotland' ];. I want to change values inside variable item.

My codeigniter controller code is,

$data['skills'] = $this->workdone->getAllSkills();
$this->load->view($page, $data);

My HTML code is,

<input type="text" name="skills" id="skills">

I have tried a lot. Is there any solution.

Upvotes: 1

Views: 3759

Answers (3)

mickmackusa
mickmackusa

Reputation: 47864

I do not endorse any hacky techniques that use array/string functions to mock up a javascript array/object.

It doesn't get simpler or more stable than using json_encode().

If your controller looks like:

$data['countries'] = ['France', 'Italy', 'Malta', 'England', 'Australia', 'Spain', 'Scotland'];
                     // these are countries, not skills
$this->load->view($page, $data);

Then your view merely needs to declare the client-side variable inside a script tag prior to executing the custom function. 

echo '<script>let countries = ' , json_encode($countries) , ';</script>';

This will make the one-dimensional array available to your client-side script and print the following into the document:

<script>let countries = ['France', 'Italy', 'Malta', 'England', 'Australia', 'Spain', 'Scotland'];</script>

Why is json_encode() so perfect? Because it will only use quoting when the datatype requires it AND it will automatically escape quotes within values. This means no matter what values you pass, your script won't break (at that point anyhow).

If you are passing several pieces of data to the client-side, you can send them all as a single object declaration (containing many key-value pairs), or you can pass each value separately.

Upvotes: 1

Kunal
Kunal

Reputation: 604

STEP 1: CREATE ARRAY ON BASIS OF QUERY WHICH STORES ARRAY HAVING ALL ITEMS FROM DATABASE...FOR EX: $all_items

STEP 2:Now you just have to use foreach loop to store php array value in javascript array..

<script type="text/javascript" language="javascript">
var all_state = new Array();
<?php foreach($all_items as $k => $v){ ?>
    all_state.push('<?php echo $v; ?>');
<?php } ?>
</script>

STEP 3: Now item array in java script will contain all states!!Thats All

Upvotes: 1

JC Lee
JC Lee

Reputation: 2387

The best way to do it is passing the value over from Codeigniter to frontend it via AJAX.

The easy way to do it is to print it out like:

var items = ["<?=implode('","',$skills)?>"];

AJAX Example (Better way)

Your jQuery will use $.get():

var items = [];
$.get(YOUR_CONTROLLER_URL, function(data){
    items = data.skills;
});

Your controller code would print JSON:

$this->output
        ->set_status_header(200)
        ->set_content_type('application/json', 'utf-8')
        ->set_output(json_encode($data))

Upvotes: 1

Related Questions