Transporting LINQ query response from C# to JavaScript as dictionary

Question

I'm creating a website page using Vue and running up against a data-parsing problem because of the C#-JS crossover.

One of the C# backend files receives job data from the database:

IEnumerable<JobClasses> jobs = await dbContext.JobClasses.Where(x => x.CaseId == caseID).ToListAsync();

which is parsed into a corresponding object:

public JobClasses 
{
    public string ClassName { get; set; }
    public string PayrollName { get; set; }
    public int ID { get; set; }
}

Some of these fields, in turn, will be extracted into a bigger class:

public Company
{
    public string Name { get; set; }
    public string Title { get; set; }
    public Data Data { get; set; }
    public object[] JobClass { get; set; }
}

I need the JobClass in Company to hold multiple ClassName - PayrollName pairs so that I can later display them on my Company 's details page. Since each Company has many JobClasses , I'm not sure what object to use.

I considered using a JobDetail array, where JobDetail holds ClassName and PayrollName , something like this:

JobDetail[] jobsDetails = jobs.Select(x => x.ClassName, x.PayrollName);

but I can't find a way to make it work despite much googling and syntax-fiddling.

I also tried

var jobArray = from j in jobs select new { j.ClassName, j.PayrollName };

which gave errors later on because IEnumerable doesn't exist in JavaScript.

My question is: what's the ideal way to receive the data pairs from a LINQ query so that they can be passed smoothly through C# and into JavaScript without any extra parsing later on?

Answer 1

Not enough rep to comment so I will try answering. I adjusted your classes slightly. There were no class keywords. I would also suggest using consistent singular for class names as you did for Company . For consistency I also removed the class-suffix from JobsClass

So you have your Job class...

public class Job 
{
    public string Name { get; set; }
    public string PayrollName { get; set; }
    public int ID { get; set; }
}

... and your Company class:

public class Company
    {
        public string Name { get; set; }
        public string Title { get; set; }
        public object Data { get; set; }
        public IEnumerable<Job> Jobs { get; set; }
    }

The data you are pulling from your db with that statement...

IEnumerable<JobClasses> jobs = await dbContext.Jobs.Where(x => x.ID == jobID).ToListAsync();

... should result in objects like this (created from scratch here):

        List<Job> jobs = new List<Job>
        {
            new Job
            {
                Name = "Foo",
                PayrollName = "PrFoo",
                ID = 1
            },
            new Job
            {
                Name = "Bar",
                PayrollName = "PrBar",
                ID = 2
            },
        };

Now if you also have a company object you can simply assign your list of jobs to it:

Company company = new Company
            {
                Name = "Acme Inc",
                JobClasses = jobs
            };

When passing down the company object from C# to JS by eg ...

return JsonConvert.SerializeObject(company);

... you end up with this JSON object:

{
   "Name":"Acme Inc",
   "Title":null,
   "Data":null,
   "Jobs":[
      {
         "Name":"Foo",
         "PayrollName":"PrFoo",
         "ID":1
      },
      {
         "Name":"Bar",
         "PayrollName":"PrBar",
         "ID":2
      }
   ]
}

So you have your company object and an array of jobs you can iterate over. Probably this helps and I hope you do not mind me fiddling with your code.