How to parse a jsonarray stored in a viewBag using jquery

Question

I am not able to parse the jsonArray in the viewBag. I want to get the contents and then use them add options to a

Upon using a console.log I could see that my json is as follows :

So far I have an array with a single element

[  
   {  
      "BackgroundColor":null,
      "BaseFormat":"PNG",
      "ColorFormat":"RGB",
      "ColorProfile":null,
      "Density":"300",
      "Extra_param":null,
      "FileFormat":"JPG",
      "PresetId":"2",
      "Resolution":"",
      "Quality":100
   }
]

I have the contents in a variable as below:

var presetArray = @Html.Raw(Json.Encode(@ViewBag.user_doc_presets)); console.log(presetArray);

I want to get the BaseFormat and colorformat to be used into a select.

I tried some stackoverflow posts but they didn't help me.

If you have a link to an old post or a hint please do share. @downvoters, Please let me know if you have any questions regarding this post instead of downvoting covertly.

`console.log(presetArray[0].BaseFormat);` ...did you try that? — ADyson, Nov 16 '18 at 14:29
But TBH if you want to put them into a select, why not just create and populate the select directly in MVC/Razor code? This seems a slightly convoluted method. — ADyson, Nov 16 '18 at 14:30
@ADyson, i did try presetArray.length, which gave me a whopping 184 and that's why i got more lost. I will try some more — Binoy Cherian, Nov 16 '18 at 14:32
that might be because it's still a string....184 is the number of characters that JSON contains (see http://jsfiddle.net/jresdqw3/). You should be able to get MVC to output it as a literal immediately. failing that, use JSON.parse() in the JS to turn it into an array before trying to use it. — ADyson, Nov 16 '18 at 14:35
But what about my other question? Why are you populating your select like this? What's wrong with making one using @Html.Select directly? — ADyson, Nov 16 '18 at 14:38
@ADyson; The select has to be populated based on the type of the base file. So when a client clicks on the filetype jpg, I have to load presets only relevant to the file for the particular client from the list of presets. — Binoy Cherian, Nov 16 '18 at 14:41
Ok. But none of that stops you from doing it server-side as far as I can see. Your data starts off server-side, so why not use server-side code to make the select? Perhaps you missed something from your explanation but I can't see any reason you would need JSON for this. — ADyson, Nov 16 '18 at 14:43
@ADyson, you are right, i can do it from the server side, but I need the jsonArray to fill some more html elements which the client can discreetly modify as per his/her wish. — Binoy Cherian, Nov 16 '18 at 14:56
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/183790/discussion-between-binoy-cherian-and-adyson). — Binoy Cherian, Nov 16 '18 at 15:10

score 1 · Answer 1 · answered Nov 16 '18 at 14:31

Since it is of array type you can access it with its Index and here it is 0 as the array element is only one.

presetArray[0].BaseFormat
presetArray[0].ColorFormat

var presetArray  = [{"BackgroundColor":null,"BaseFormat":"PNG","ColorFormat":"RGB","ColorProfile":null,"Density":"300","Extra_param":null,"FileFormat":"JPG","PresetId":"2","Resolution":"","Quality":100}]



console.log("Base Format: " + presetArray[0].BaseFormat);
console.log("Color Format: " + presetArray[0].ColorFormat);

Binoy Cherian · Accepted Answer · 2018-11-20T15:56:07.463

I was missing a Json.Parse, which solved the problem

Please refer to http://jsfiddle.net/jresdqw3/

var arr = [  
   {  
      "BackgroundColor":null,
      "BaseFormat":"PNG",
      "ColorFormat":"RGB",
      "ColorProfile":null,
      "Density":"300",
      "Extra_param":null,
      "FileFormat":"JPG",
      "PresetId":"2",
      "Resolution":"",
      "Quality":100
   }
];

alert(arr.length);
alert(JSON.stringify(arr).length);

How to parse a jsonarray stored in a viewBag using jquery

2 Answers2