Uncaught SyntaxError: Unexpected token & (When i stored value after serializing object) this error comes on View

Question

I try to alert value come from Db. I stored this value by serializing it into Javascript. But when i try to alert this value on View it through error "Uncaught SyntaxError: Unexpected token & " Here is the column value placed in DB

["TotalCriteria:Total Criteria","{CriteriaID:1,Title:abc,Required:Not Required}","{CriteriaID:2,Title:abc55,Required:Not Required}","{CriteriaID:3,Title:adas,Required:Rquired}","{CriteriaID:5,Title:New,Required:Not Required}","MeetCriteria:Meet","{CriteriaID:1,Title:abc}","{CriteriaID:2,Title:abc55}","{CriteriaID:3,Title:adas}","{CriteriaID:5,Title:New}"]

I try to parse it Using JSON object in

$(document).ready(function(){
var msg = JSON.parse(@Model.QualifyDetail);
alert(msg);
});

Edit (BackendCode)

CModel.QualifyDetail = JsonString(entities);
    public string JsonString(Entity[] entities)
    {
        List<object> list = new List<object>();
        list.Add("TotalCriteria:Total Criteria");
        string requiredStatus = null;
        int CROID = new VM_CROEmployee().FindById(VM_User2.LoggedInUserID()).CROID;
        List<VM_QualifyCriteria> Criteria = new VM_QualifyCriteria().FindAllByAttributes(c => c.CROID == CROID);

        foreach(VM_QualifyCriteria obj in Criteria)
        {
            if (obj.IsRequired == true)
                requiredStatus = "Rquired";
            else
                requiredStatus = "Not Required";
            list.Add("{CriteriaID:" + obj.CriteriaID + ",Title:" + obj.Title + ",Required:" + requiredStatus + "}");
        }
        list.Add("MeetCriteria:Meet");
        foreach(Entity obj in entities)
        {
            if (obj.State == true)
            {
                list.Add("{CriteriaID:" + new VM_QualifyCriteria().FindById(obj.CriteriaId).CriteriaID +",Title:"+new VM_QualifyCriteria().FindById(obj.CriteriaId).Title+"}");
            }
        }
        //string qualifyDescription=new JavaScriptSerializer().Serialize(list);
        return new JavaScriptSerializer().Serialize(list); 
    }

Answer 1

You don't need to parse the JSON, just output the JSON into the script. msg will already be a JavaScript array so there's no need to parse it again.

(Use HtmlHelper.Raw() or else the quotes will be HTML encoded)

$(document).ready(function(){
    var msg = @Html.Raw(Model.QualifyDetail);
    alert(msg[0]);
});

This will output (JSON formatted for readability):

$(document).ready(function(){
    var msg = [
        "TotalCriteria:Total Criteria",
        "{CriteriaID:1,Title:abc,Required:Not Required}",
        "{CriteriaID:2,Title:abc55,Required:Not Required}",
        "{CriteriaID:3,Title:adas,Required:Rquired}",
        "{CriteriaID:5,Title:New,Required:Not Required}",
        "MeetCriteria:Meet",
        "{CriteriaID:1,Title:abc}",
        "{CriteriaID:2,Title:abc55}",
        "{CriteriaID:3,Title:adas}",
        "{CriteriaID:5,Title:New}"
    ];
    alert(msg[0]);  // should alert "TotalCriteria:Total Criteria"
});

As mentioned by others, while this is valid JSON (it's an array of strings), it appears to represent a more complex data structure but it was mangled during serialization. You'll probably need to fix that before you can use it.

Edit

A better way of representing the data might be an object with 2 arrays, one with all criteria, and one with criteria that have been met. Something like this:

{
    "TotalCriteria": [
        {
            "CriteriaID": 1,
            "Title": "abc",
            "Required": "Not Required"
        },
        {
            "CriteriaID": 2,
            "Title": "abc55",
            "Required": "Not Required"
        },
        {
            "CriteriaID": 3,
            "Title": "adas",
            "Required": "Required"
        },
        {
            "CriteriaID": 5,
            "Title": "New",
            "Required": "Not Required"
        }
    ],
    "MeetCriteria": [
        {
            "CriteriaID": 1,
            "Title": "abc"
        },
        {
            "CriteriaID": 2,
            "Title": "abc55"
        },
        {
            "CriteriaID": 3,
            "Title": "adas"
        },
        {
            "CriteriaID": 5,
            "Title": "New"
        }
    ]
}

To access a criteria, you would do this...

var msg0 = msg.TotalCriteria[0];
alert(msg0.CriteriaID);
alert(msg0.Title);
alert(msg0.Required);

Here's how you can construct the above JSON in your backend code using LINQ to create an object containing two lists of objects, then serializing it...

public string JsonString(Entity[] entities)
{
    int CROID = new VM_CROEmployee().FindById(VM_User2.LoggedInUserID()).CROID;
    List<VM_QualifyCriteria> criteria = new VM_QualifyCriteria().FindAllByAttributes(c => c.CROID == CROID);

    // get a list of all criteria
    var totalCriteria = criteria.Select(c => new {
        c.CriteriaID,
        c.Title,
        Required = c.IsRequired ? "Required" : "Not Required"
    }).ToList();

    // get list of criteria met
    var meetCriteria = criteria
                        .Where(c => entities.Any(e => e.State == true && e.CriteriaId == c.CriteriaID))
                        .Select(c => new {
                            c.CriteriaID,
                            c.Title
                        }).ToList();

    // construct object with the 2 lists
    var obj = new { TotalCriteria = totalCriteria, MeetCriteria = meetCriteria };

    return new JavaScriptSerializer().Serialize(obj); 
}

Answer 2

Basically you have a jsonarray that in-turn has string and jsonObject as its elements so first see whether you have the JsonArray response from server by alerting it then select each element in array like

var jsonArray=response;
alert(jsonArray);//check the response
alert(jsonArray[0]); //first element

then treat the jsonObject element like wise to access it

To check your json response is valid use http://jsonlint.com/