How to convert JSON to Jquery array in MVC ASp.Net

Question

Sorry for long question. I just want to make clear what I'm asking.

I've a JSON result in my Controller as:-

 public JsonResult Top7Video() 
    {
        db.Configuration.ProxyCreationEnabled = false;
        var result = (from v in db.TblVideos
                      orderby v.FileName
                       select new { title= v.FileName, artist=v.Artist,Image=v.Image,ID=v.ID}).Take(7).ToList();

        return Json(result,JsonRequestBehavior.AllowGet);
    }

And in my Razor View I want it as a JQuery array. I tried following approach:-

<script type="text/jscript">

        var myarray = '{"title": "3. Ellie-Goulding","artist": "","mp4": "~/video/Ellie-Goulding.mp4","ogv": "~/video/Ellie-Goulding.ogv","webmv": "~/video/Ellie-Goulding.webm","poster": "~/video/VideoImg/play1.png"}';
        //var myarray = '{"Err0":"Only letters and white space allowed in Name"}';
        
        //alert(myarray);

        $(function () {
            $.ajax({
                type: "GET",
                url: "/Home/Top7Video",
                data:"{}",
                datatype: "Json",
                success: function (data) {
                    $.each(arr, function (index, value) {
                        myarray.push([',{ "title": "' + value.FileName + '", "artist": "' + value.Artists + '", "mp4": "~/video/' + value.FileName + '", "ogv": "~/video/' + value.FileName + '", "webmv": "~/video/' + value.FileName + '", "poster": "~/video/VideoImg/' + value.Image + '" }']);                       
                    });
                }
            });
        });


        var arr = $.parseJSON(myarray); //convert to javascript array
        alert(arr);


        $(function () {
            $.ajax({
                type: "GET",
                url: "/Home/Top7Video",
                datatype: "Json",
                success: function (data) {
                    $.each(data, function (index, value) {
                        $('#dropdownVideo').append('<li><div><a href="javascript:;" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="0">' + value.FileName + '<span class="jp-artist"> Song by ' + value.Artist + '</span></a></div></li>');
                    });

                }
            });
        });


        


        $(document).ready(function () {

            new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer_1",
                cssSelectorAncestor: "#jp_container_1"
            },
                arr,
                {
                    swfPath: "../../dist/jplayer",
                    supplied: "webmv,ogv,mp4",
                    useStateClassSkin: true,
                    autoBlur: false,
                    smoothPlayBar: true,
                    keyEnabled: true
                });

        });



    </script>

Following is my HTML:-

<div class="video-main">
            <div class="video-record-list">
                <div id="jp_container_1" class="jp-video jp-video-270p" role="application" aria-label="media player">
                    <div class="jp-type-playlist">
                        <div id="jquery_jplayer_1" class="jp-jplayer" style="width: 480px; height: 270px;">
                            <img id="jp_poster_0" src="~/video/VideoImg/play2.png" style="width: 480px; height: 270px; display: inline;">
                            <video id="jp_video_0" preload="metadata" src="~/video/Ellie-Goulding.mp4" title="1. Ellie-Goulding" style="width: 0px; height: 0px;"></video>
                        </div>
                        <div class="jp-gui">
                            <div class="jp-video-play" style="display: block;">
                                <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
                            </div>
                            <div class="jp-interface">
                                <div class="jp-progress">
                                    <div class="jp-seek-bar" style="width: 100%;">
                                        <div class="jp-play-bar" style="width: 0%;"></div>
                                    </div>
                                </div>
                                <div class="jp-current-time" role="timer" aria-label="time">00:00</div>
                                <div class="jp-duration" role="timer" aria-label="duration">00:30</div>
                                <div class="jp-controls-holder">
                                    <div class="jp-controls">
                                        <button class="jp-previous" role="button" tabindex="0">previous</button>
                                        <button class="jp-play" role="button" tabindex="0">play</button>
                                        <button class="jp-next" role="button" tabindex="0">next</button>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" role="button" tabindex="0">mute</button>
                                        <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 100%;"></div>
                                        </div>
                                    </div>
                                    <div class="jp-toggles">

                                        <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                                    </div>
                                </div>
                                <div class="jp-details" style="display: none;">
                                    <div class="jp-title" aria-label="title">1. Ellie-Goulding</div>
                                </div>
                            </div>
                        </div>
                        <div class="jp-playlist">
                            <ul id="dropdownVideo" style="display: block;">
                                <li class="jp-playlist-current">
                                    <div>
                                        <a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a>
                                        <a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="0">
                                            1. Ellie-Goulding
                                            <span class="jp-artist">by Pixar</span>
                                        </a>
                                    </div>
                                </li>
                                
                            </ul>
                        </div>
                        <div class="jp-no-solution" style="display: none;">
                            <span>Update Required</span>
                            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                        </div>
                    </div>
                </div>
            </div>
        </div>

I'm Not able to convert the JSON into Jquery aray. I get following error:-

Uncaught TypeError: myarray.push is not a function

I'm New into JSON and searched a lot for solution here How to response an array in json to jquery? and How to convert Json object to Jquery Array?. But I'm not able to solve this. PLease HELP!!

myarray is a string, not an array. Maybe you meant to use brackets [] instead of quotes ''? — David
– David, Commented Jan 8, 2017 at 2:17
data is already an array. And if you want those property names (title, artist etc) then modify your controller to send an collection of anonymous objects with those property names - select new { title = v.FileName, .... } — user3559349
– user3559349, Commented Jan 8, 2017 at 2:21
@David using [ ] in place of ' ' doen't help either . I'm getting same error message and for alert(arr); I'm getting [object] [Object] — Deepak
– Deepak, Commented Jan 8, 2017 at 3:24
@StephenMuecke I edited my question above with your suggestion. Getting same error message and for alert(arr); I'm getting [object] [Object] — Deepak
– Deepak, Commented Jan 8, 2017 at 3:25
Where are you getting that error. What are you attempting to do here? Why are you making 2 ajax calls to get the same data, and why are you using ajax anyway instead of passing the model to the view initially — user3559349
– user3559349, Commented Jan 8, 2017 at 3:26

Luke101 · Accepted Answer · 2017-01-08 03:45:01Z

0

Add these lines

myarray = JSON.parse(myarray);
myarray = [myarray];

under this line

var myarray = '{"title": "3. Ellie-Goulding","artist": "","mp4": "~/video/Ellie-Goulding.mp4","ogv": "~/video/Ellie-Goulding.ogv","webmv": "~/video/Ellie-Goulding.webm","poster": "~/video/VideoImg/play1.png"}';

myarray is a string. You can't push a string.

answered Jan 8, 2017 at 3:45

Luke101

65.7k89 gold badges247 silver badges377 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deepak Over a year ago

Doing that I'm Getting Error:- Uncaught SyntaxError: Unexpected token o in JSON at position 1

Shyju · Accepted Answer · 2017-01-08 03:53:38Z

0

As others have mentioned in the comment, the below line is not an array

 var myarray = '{"title": "3. Ellie-Goulding","artist": "","mp4": "~/video/Ellie-Goulding.mp4","ogv": "~/video/Ellie-Goulding.ogv","webmv": "~/video/Ellie-Goulding.webm","poster": "~/video/VideoImg/play1.png"}';

But a string variable ! You cannot call push method on that. So the first thing to do is make this to a proper array. Your action method returns the json data a collection. So simply loop through it using $.each. and create a new js object from each item as needed and push to the array.

var myarray =[]; // empty array
// If you want to have some default items, you can push here
myArray.push( { title : "Jon", artist:"Help"});

$(function () {
        $.ajax({
            type: "GET",
            url: "/Home/Top7Video"
            success: function (data) {
                $.each(arr, function (index, value) {
                    var item = { title:  value.FileName , 
                                 artist: value.Artists
                                 //to do : Add other properties here as well
                               };
                   //Now you can push this new item to the array
                   myarray.push(item);
                });
            }
        });
});

Also, like Stephen mentioned in the comment, you might consider sending the array with the transformed values from the action method itself instead of doing the string concatenation in your javascript!

I also see that you are making 2 calls, one for populating the array and one for adding items to the dropdown. Since it is the same data you are getting, why not do both in the same ajax call's success callbacks ?

edited Jan 8, 2017 at 3:53

answered Jan 8, 2017 at 3:48

Shyju

220k106 gold badges420 silver badges499 bronze badges

2 Comments

Deepak Over a year ago

Yeah Right! I guess I'm making some progress. With that code I merged both calls into one json my #dropdownVideo is getting required details but no the array. The alert doesn't popup and I got the error :- Uncaught SyntaxError: Unexpected end of JSON input. Please I really appreciate the help.

Deepak Over a year ago

Array now looks like :- var item = { title: value.FileName, artist: value.Artist, mp4: "~/video/" + value.FileName, ogv: "~/video/" + value.FileName, webmv: "~/video/" + value.FileName, poster: "~/video/VideoImg/" + value.Image //to do : Add other properties here as well }; myarray.push(item);

Collectives™ on Stack Overflow

How to convert JSON to Jquery array in MVC ASp.Net

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related