How to display data from ajax?

Question

PHP

Good day, I have been fooling around for a long time, I have climbed everything that is possible. But it doesn't work
There is a ckeditor plugin.
It statically displays information in the form of select.
It works like this:

Here is the code for this section:

id : 'hero',
                                            type : 'select',
                                            label : 'Выбери имя.',
                                            items: [ [ 'Mamba', '1'],[ 'Lamba', '2'] ],
                                            'default': '',
                                            onChange: function( api ) {
                                                // this = CKEDITOR.ui.dialog.select
                                                alert( 'Current value: ' + this.getValue() );
                                            }

Here we output the name to the list and, when selected, get its value.
Like this instead: function( api ) {
// this = CKEDITOR.ui.dialog.select
alert( 'Current value: ' + this.getValue() );
}
I need ajax request.
Actually, in items I need values ​​from ajax.

$.ajax({
                    url: '/heroes',
                    success: function(data) {
                        for (var key in data)
                        {
                            // data[key][1] data[key][0] - примерно такого вида.

                        }

file: heroes.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Heroes extends Model
{
    protected $table = 'heroes';
    protected $fillable = [ 'id','name','title','description','url','img_path','damage','health','mana','protection','attack_time','attacks_per_second','range_view','range_attack','type_attack','html_id','created_at','updated_at'];

}

HeroesController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Heroes;
use Illuminate\Support\Facades\DB;
class HeroesController extends Controller
{
    public function adminSelect(Request $request){
        $array =[];
        $adminheroes =  Heroes::all();
        $adminheroesHtmlid =  DB::table('heroes')->select('name')->get();
        $adminpanelHeroes =['adminheroesHtmlid' => $adminheroesHtmlid,'adminheroes' => $adminheroes];
        $gfg = json_encode($adminheroesHtmlid);
        $data = $adminheroesHtmlid;
        foreach($adminheroesHtmlid as $k => $heroes)
        {
            $array[$k][]=$heroes->name;
            $array[$k][]= '<a href="" data-html="true" data-trigger="hover" data-toggle="popover" data-content="rgdrg"><img src="/images/heroes_small/pudge_small.png" style="width: 26px; height: 15px; margin-top: 0; margin-right: 4px" alt=""></a>';
        }

        return $array;
    }
}

It is necessary that the value $array[$k][]=$heroes->name; so is the html code, which is also in $array[$k][] in data[key][1] and data[key][0]
I hope I was able to convey the idea, I already despaired ...

Answer 1

Maybe it will be useful for someone, I did it like this:

jQuery.extend({
    getValues: function(url) {
        var result = null;
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json',
            async: false,
            success: function(data) {
                    result = data;
                console.log(result)
            }
        });
        return result;
    }
});
var results = $.getValues('/heroes');

CKEDITOR.plugins.add( 'hero',
    {
        icons: 'hero',
        requires : ['richcombo'], //, 'styles' ],
        init : function( editor )
        {
            editor.addCommand( 'abbrDialog', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
            editor.ui.addButton( 'Hero',
                {
                    label: 'Выбрать героя',
                    command: 'abbrDialog',

                } );

            CKEDITOR.dialog.add( 'abbrDialog', function ( editor )
            {
            //     var fields;
            //     var tenant_fields = []; //new Array();
            //     $.ajax({
            //         url: '/heroes',
            //         dataType:'json',
            //         success: function(data){
            //             for (var key in data)
            //             {
            //                 $('.cke_dialog_ui_input_select select').html('<option value='+data[key][1]+'>'+data[key][0]+'</option>');
            //
            //         }
            //             console.log(data[1]);
            //     }
            // });

                // tenant_fields[4]=["Invoker", "4"];
                // tenant_fields[5]=["Axe", "5"];
                // tenant_fields[6]=["Juggernaut", "6"];
                // tenant_fields[7]=["Bloodseeker", "7"];
                // tenant_fields[8]=["Zeus", "8"];
                // tenant_fields[9]=["Faceless Void", "9"];
                // tenant_fields[10]=["Legion Commander", "10"];
                // tenant_fields[11]=["Crystal Maiden", "11"];


                return {
                    title : 'Выбор героя',
                    minWidth : 400,
                    minHeight : 200,


                    // onChange: function (api) {
                    //     // this = CKEDITOR.ui.dialog.select
                    //     alert('Current value: ' + this.getValue());
                    // }

                    contents :
                        [
                            {
                                id : 'tab1',
                                label : 'Tenants',
                                elements :
                                    [
                                        {
                                            type : 'select',
                                            id : 'style',
                                            label : 'Style',
                                            setup : '',
                                            items : results,
                                            commit : function( data )
                                            {
                                                data.style = this.getValue();
                                            }

                                        }
                                    ]
                            }

                        ],

                    onOk : function()
                    {
                        var dialog = this;
                        var abbr = editor.document.createElement( 'span' );
                        abbr.setHtml( dialog.getValueOf( 'tab1', 'style' ) );

                        editor.insertElement( abbr );
                    }

                };
            } );
        }
    });