Auto populate select boxes at page load from array's via using jQuery/Ajax/PHP

Question

So i'm trying to fill three select boxes at the same time, when page load. The data for boxes is from array's. So one box for $cpuArr, one box for $motherboardsArr and one box for $videocardArr.

PHP

$cpuArr = file_get_contents('data/cpu.json');
$motherboardsArr = file_get_contents('data/motherboard.json');
$videocardArr = file_get_contents('data/video-card.json');

if(isset($_POST['request']) == 1){

    echo $cpuArr;// Sending response
}

jQuery

$(document).ready(function(){
//Ajax request
    $.ajax({ 
        url: 'logic.php',
        type: 'post',
        data: {request: 1},
        dataType: 'json',
        success: function fetchItems(response){

            for( var i = 0; i< response.length; i++){
                $('#cpu').append("<option value='"+response[i]['ID']+"'>"+response[i]['Name']+"</option>");
            }
        }
    });
});

HTML

                            <select id='cpu'>
                                <option value="0">-Select CPU-</option>
                            </select>
                            <select id='motherboard'>
                                <option value="">-Select motherboard-</option>
                            </select>
                            <select id='video-card'>
                                <option value="">-Select Video Card-</option>
                            </select>

Its working only for one, i dont know how to make it with three boxes, without repating the code.I will be grateful if anyone can help. :)

Swati · Accepted Answer · 2021-05-09 14:34:48Z

1

You can pass all data inside associative array and then use json_encode i.e :

  if(isset($_POST['request']) == 1){
        $data = array("cpuArr"=>$cpuArr, 
                      "motherboardsArr"=>$motherboardsArr,  
                       "videocardArr"=>$videocardArr);
         echo json_encode($data);
    }

Then , inside your success function of ajax you can access them like below :

success: function fetchItems(response){
      var cpu = response.cpuArr;
      var mb = response.motherboardsArr;
      var vdio = response.videocardArr;

            for( var i = 0; i< cpu.length; i++){
                $('#cpu').append("<option value='"+cpu[i]['ID']+"'>"+cpu[i]['Name']+"</option>");
            }
      //same for others ...
   }

answered May 9, 2021 at 14:34

Swati

28.5k4 gold badges26 silver badges45 bronze badges

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

5 Comments

Boysa Over a year ago

Still not working dude, i make the other three for's but nothing is loading in select boxes. I see the response with array in console, but nothing from success function of ajax.

charlietfl Over a year ago

WIll need to either parse each property value or json_decode() it server side

Boysa Over a year ago

Array ( [cpuArr] => [ { "ID": "001", "Name": "Intel1" }, ............ ] [motherboardsArr] => [ { "ID": "001", "Name": "Motherboard1" }, { ............. ] [videocardArr] => [ { "ID": "001", "Name": "Nvidia1" }, { ............. ] )

Boysa Over a year ago

Yes its working now with json_decode() Thanks Swati and Charlietfl Have a nice day ! :)

Swati Over a year ago

@charlietfl Thank you for pointing that out . I completely forgot about that :) .

charlietfl · Accepted Answer · 2021-05-09 15:17:40Z

0

You can do this all in one request and just make a GET request with $.getJSON()

PHP

function getFileAsArray($type){
   $path = "data/".$type.".json";
   return json_decode(file_get_contents($path), true);
}

$types = ['cpu','motherboard','video-card'];

foreach($types as $type){
   $output[$type] = getFileAsArray($type);
}

echo json_encode($output);

JQuery:

$.getJSON('logic.php').then(data => {    
      $.each(data, (key, arr)=>{
         const options = arr.map(o => new Option(o.Name, o.ID));
         // keys in php matching ids in html
         $('select#' + key).append(options);
      });
});

edited May 9, 2021 at 15:17

answered May 9, 2021 at 15:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Auto populate select boxes at page load from array's via using jQuery/Ajax/PHP

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related