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:

Sample

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

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.

Error, LEFT = jQuery.parseJSON RIGHT = JSON.parse

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

• mason: Do not post code as images. Instead, create a minimal reproducible example and post it directly in the question. Not as an image.
• Yantup: @mason Done, will have it in mind for further ocassions
• mason: You still have not provided a minimal reproducible example (MCVE). I don't see your JavaScript here in the question.
• Yantup: @mason Ok, i hope it is ok with requirements now

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

• Yantup: To be honest im not sure what to do with this info
• shobeurself: What does your javascript look like in the view?
• Yantup: After connections it is like this : var arreglo = conex.server.getArreglo(); thats when the data is send to the script. At parse try it was like this : var qwe= JQuery.parseJSON(arreglo) or var qwe=JSON.parse(arreglo);. Below that a console.log() to check values. @user1165921
• shobeurself: getArreglo() is returning a javascript promise. Since javascript runs asynchronously, the next line will run before getArreglo() finishes. What does getArreglo() look like?
• Yantup: I'll post screenshot on the question