How to send an object array from c# to javascript?

Question

Im trying to send an array that contains some objects via connection made in SignalR, the connection is not a problem, everything works fine. When the data arrives to the view it is no longer the array i need to use. This is the class:

public class Empresa
    {
        public string nombre { get; set; }
        public int vidID { get; set; }
        public string img64 { get; set; }
        public string color { get; set; }

    }

At the end the object will be something like this:

The object is send to the view and this is the output:

I have already tried with JsonConvert.SerializeObjectas i found on other threads, yet it doesnt seems to work. I tried to convert the data send with this jQuery.parseJSON(data) (Left) and with this JSON.parse(data)(Right); it throws an error on both cases as seen in the picture below.

I'm not sure if it is that way because the object sended is made this way:

private readonly ConcurrentDictionary<int, Empresa> _ar1 = new ConcurrentDictionary<int, Empresa>();

var data = new List<Empresa>
{
   new Empresa{nombre ="Globex Corp",color="red",vidId=1, img="data:image/jpeg;base64,blabla" },
   new Empresa{nombre ="AM",color="blue",vidId=2, img="data:image/jpeg;base64,blabla" }
}
for(int i = 0; i<=6; i++)
{
    _ar1.TryAdd(data[i].vidID, data[i]);
}

This is inside other function but it is the next one that involves the data send.

public IEnumerable<Empresa> GetArreglo()
        {
           return _ar1;
        }

So far im not sure what could be wrong or if i need to aproach a different solution. If any more info is needed ill post it. And even it is obvious im a newby still learning on this.

EDIT:

This is all the code involved:

// This is the JS
<script>

        var ubi = '@ViewBag.ubicacion';
        console.log("Ubicación: " + ubi);
        var conex = $.connection.channel;
        var $marco = $('#marco');
        var $imagen = $('#imagen');
        var $empresa = $('#empresa');

        function empezar() {

            var min;
            var max;
            var pos;
            var arreglo = new Array;



            function init() {

                conex.server.createGroup(ubi);
                console.log("Entro al canal");
                arreglo = conex.server.getArreglo(ubi);
                //pos = arreglo.split('|');
                //a.split is not a function
                console.log(arreglo);
                //console.log(pos);
                setInterval(update, 6000);

            }

            function update() {


            }

            $.connection.hub.start().done(init);
        }

        window.onload = function() { empezar(); }
    </script>

    //It gets the conection to the HUB:

    [HubName("channel")]
    public class CanalHub : Hub
    {
        private readonly Canal _canal;

        public CanalHub() : this(Canal.Instance) { }

        public CanalHub(Canal canal)
        {
            _canal = canal;
        }



        public string[] GetArreglo(string ubi)
        {
            string[] array = _canal.GetArreglo(ubi);
            return array;
            //it is now a string[] because i wanted to
            //try creating the obj with .split('|')
        }


// And finally this is the last part involved:

 public class Canal
    {

        private static Random random = new Random();
        private volatile List<Canales> listaCan = new List<Canales>();
        private readonly static Lazy<Canal> _instance = new Lazy<Canal>(() => new Canal(GlobalHost.ConnectionManager.GetHubContext<CanalHub>().Clients));
        private readonly ConcurrentDictionary<int, Empresa> _datos = new ConcurrentDictionary<int, Empresa>();
        private readonly ConcurrentDictionary<int, Empresa> _ar1 = new ConcurrentDictionary<int, Empresa>();

        private Canal(IHubConnectionContext<dynamic> clients)
        {
            Clients = clients;

            //Create the sample objects for the class
            var datos = new List<Empresa>
            {
                new Empresa{nombre="Globex Corp", color="#A87F3D", vidID=1, img="balbal" },
                new Empresa{nombre="AM", color="#535E89", vidID=2, img="balba" },
                new Empresa{nombre="Frutijugos", color="#92191A", vidID=3, img="askldj" }
    };


            for (int i = 0; i <=6 ; i++)
            {
                _ar1.TryAdd(datos[i].vidID, datos[i]);
            }
            for (int i = 7; i <= 13; i++)
            {
                _ar2.TryAdd(datos[i].vidID, datos[i]);
            }
            for (int i = 14; i <= 20; i++)
            {
                _ar3.TryAdd(datos[i].vidID, datos[i]);
            }
            //sort them on 3 different arrays
        }

        private IHubConnectionContext<dynamic> Clients { get; set; }

        public static Canal Instance
        {
            get { return _instance.Value; }
        }


        public string[] GetArreglo(string ubi)
        {
            string[] array = new string[7];
            int i = 0;

            if (ubi == "Campanario")
            {
                foreach (var item in _ar1)
                {
                    array[i] += item.Value.nombre + "|";
                    array[i] += item.Value.color + "|";
                    array[i] += item.Value.img + "|";
                    array[i] += item.Value.vidID + "|";
                    i++;
                }

                return array;
            }
            //sort the array values and add them to the array

            else return null;          
        }

Answer 1

It appears that your javascript promise is not set up correctly. The object in the view is the promise object and not the object returned. You are going to need to set up the promise correctly. deferred promise