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

Question

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.

concept : var items = <?= print_r(skills); ?>;

Visarut Sae-Pueng
– Visarut Sae-Pueng

2016-03-07 11:13:52 +00:00
Commented Mar 7, 2016 at 11:13 — Visarut Sae-Pueng
– Visarut Sae-Pueng, Commented Mar 7, 2016 at 11:13

JC Lee · Accepted Answer · 2016-03-07 11:21:08Z

1

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))

answered Mar 7, 2016 at 11:21

JC Lee

2,4073 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kunal · Accepted Answer · 2016-03-07 11:51:03Z

1

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

edited Mar 7, 2016 at 11:51

answered Mar 7, 2016 at 11:23

Kunal

60410 silver badges18 bronze badges

Comments

mickmackusa · Accepted Answer · 2019-08-12 22:32:30Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related