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

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;          
        }