Utilize a WebAPI controller to serialize a complicated JSON object

Question

Utilize a WebAPI controller to serialize a complicated JSON object

Embarking on a new journey with AngularJS and ASP.NET WebAPI, I find myself faced with the challenge of working with base tables structured as follows:

CurriculumID    SubjectArea CourseNumber
------------    ----------- ------------
303     GHIJ        101
304     ABCD        102
305     MNPQ        103
306     WXYZ        104

lookupId    lookupValue
--------    -----------
1       Very Useful
2       Somewhat Useful
3       Not Useful
4       Not Applicable
5       Elsewhere

To tackle this requirement, I've created model classes (course and lookup) for these tables. Now, my quest is to generate JSON data in the backend using a web API controller method

public HttpResponseMessage getData(...)

The desired JSON output should be structured as follows:

    $scope.questions = [
    {
        "CurriculumID": "303", "SubjectArea": "GHIJ", "CourseNumber": "101", "answers": [
         { "lookupValue": "Very Useful","lookupId":"1" },
         { "lookupValue": "Somewhat Useful", "lookupId": "2" },
         { "lookupValue": "Not Useful", "lookupId": "3" },
         { "lookupValue": "Not Applicable", "lookupId": "4" },
         { "lookupValue": "Elsewhere", "lookupId": "5" }
        ]
    },
    {
        "CurriculumID": "304", "SubjectArea": "ABCD", "CourseNumber": "102", "answers": [
         { "lookupValue": "Very Useful","lookupId":"1" },
         { "lookupValue": "Somewhat Useful", "lookupId": "2" },
         { "lookupValue": "Not Useful", "lookupId": "3" },
         { "lookupValue": "Not Applicable", "lookupId": "4" },
         { "lookupValue": "Elsewhere", "lookupId": "5" }
        ]
    }
.
.
.
];

For further insights, refer to this link: https://plnkr.co/edit/73oA3rsrre8gqYX9V25W?p=preview

I'm seeking guidance on constructing the two methods getData to serialize this structure in ASP.NET. Any assistance towards achieving this serialization would be greatly appreciated.

https://plnkr.co/edit/73oA3rsrre8gqYX9V25W?p=preview

javascript asp.net angularjs json asp.net-web-api

Answer 1

Answer №1

Assume you have structured your SQL tables with the given entities:

public class Question
{
    [Key]
    public int CurriculumID { get; set; }

    public string SubjectArea { get; set; }

    public int CourseNumber { get; set; }
}

public class Rating
{
    [Key]
    public int LookupId { get; set; }

    public string LookupValue { get; set; }
}

The next step involves creating a view model that mirrors the desired structure for serialization:

public class QuestionViewModel
{
    public int CurriculumID { get; set; }

    public string SubjectArea { get; set; }

    public int CourseNumber { get; set; }

    public IList<RatingViewModel> Answers { get; set; }
}

public class RatingViewModel
{
    public int LookupId { get; set; }

    public string LookupValue { get; set; }
}

Subsequently, within your controller, you can retrieve the entities from the database and populate the view model accordingly:

public class QuestionsController: ApiController
{
    [HttpGet]
    [Route("api/questions")]
    public IHttpActionResult Get()
    {
        using (var db = new MyDbContext())
        {
            IList<Rating> ratings = db.Ratings.ToList();
            IList<Question> questions = db.Questions.ToList();
            IList<QuestionViewModel> result = questions.Select(q => new QuestionViewModel
            {
                CurriculumID = q.CurriculumID,
                SubjectArea = q.SubjectArea,
                CourseNumber = q.CourseNumber,
                Answers = ratings.Select(r => new RatingViewModel
                {
                    LookupId = r.LookupId,
                    LookupValue = r.LookupValue,
                }).ToList(),
            }).ToList();

            return this.Ok(result);
        }
    }
}

Answer 2

Assume you have structured your SQL tables with the given entities:

public class Question
{
    [Key]
    public int CurriculumID { get; set; }

    public string SubjectArea { get; set; }

    public int CourseNumber { get; set; }
}

public class Rating
{
    [Key]
    public int LookupId { get; set; }

    public string LookupValue { get; set; }
}

The next step involves creating a view model that mirrors the desired structure for serialization:

public class QuestionViewModel
{
    public int CurriculumID { get; set; }

    public string SubjectArea { get; set; }

    public int CourseNumber { get; set; }

    public IList<RatingViewModel> Answers { get; set; }
}

public class RatingViewModel
{
    public int LookupId { get; set; }

    public string LookupValue { get; set; }
}

Subsequently, within your controller, you can retrieve the entities from the database and populate the view model accordingly:

public class QuestionsController: ApiController
{
    [HttpGet]
    [Route("api/questions")]
    public IHttpActionResult Get()
    {
        using (var db = new MyDbContext())
        {
            IList<Rating> ratings = db.Ratings.ToList();
            IList<Question> questions = db.Questions.ToList();
            IList<QuestionViewModel> result = questions.Select(q => new QuestionViewModel
            {
                CurriculumID = q.CurriculumID,
                SubjectArea = q.SubjectArea,
                CourseNumber = q.CourseNumber,
                Answers = ratings.Select(r => new RatingViewModel
                {
                    LookupId = r.LookupId,
                    LookupValue = r.LookupValue,
                }).ToList(),
            }).ToList();

            return this.Ok(result);
        }
    }
}

Utilize a WebAPI controller to serialize a complicated JSON object

Answer №1

Similar questions

The Angular 2 Router's navigation functionality seems to be malfunctioning within a service

What is the method for enlarging the width of the nvd3 chart timespan?

Updating or removing fullCalendar events in Symfony

Promise.all doesn't pause for Firestore queries to iterate

Manipulate Attributes in Javascript

Can CKEditor be integrated with Mutation Observer? If so, how can this be achieved?

A guide to accessing JSON values with variables in brightscript

PHP failing to retrieve information

What is the best way to create a responsive div containing multiple images?

Is it feasible to execute a cross-site request forgery attack on a URL that delivers a JSON object as a response?

Error encountered in Angular after consolidating JavaScript files into a single file: [$injector:modulerr]

What is the best way to add a listener for a modification of innerHTML within a <span>?

Ensuring the accuracy of a single field within a form containing multiple fields is made possible through the utilization of

An error has been detected by Internet Explorer 8 at line number 373402504

Seamless upward swipe effect (Animation in React Native)

Creating an in-memory DataTable for testing purposes with Linq: A step-by-step guide

Creating dynamic routes for custom locales in Next.js

Struggling to retrieve posted data using Angular with asp.net

Exploring intricate connections between objects is a feature of Entity Framework

Expanding Module Scope to Just the Request (employing Require, Node.js)