How to Convert string data from ajax success to javascript data?

Question

Hello Everybody i have this code and i'm a beginner at ajax things ,and i'm using tinymce jquery and i'm using mention plugin which i found in,so what i'm doing in this code is to make a list of users that i can mention to so i need to make this code run:

mention plugin website is: https://github.com/CogniStreamer/tinyMCE-mention

WebMethod Part:

 [WebMethod]
    public static string GetUsers()
    {
        return "[{name:'Messi'},{name:'Jason'},{name:'Omar'},{name:'Eren'}]";
    }

and here is the ajax code part:

 function dat() {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetUsers",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                 alert(data.d);//show me this alert "[{name:'Messi'},{name:'Jason'},{name:'Omar'},{name:'Eren'}]"
                    return data.d;
                },
                error: function (data) {
                    return "";

                }
            });
        }

and here is the jquery tinymce options part:

 tinymce.init({



        selector: '#Selector',
        theme: 'modern',
        elements: "rte",
        plugins: [
          'advlist autolink mention lists link image charmap  preview hr anchor pagebreak',
          'searchreplace wordcount visualblocks visualchars code fullscreen',
          'insertdatetime media nonbreaking  table contextmenu directionality',
          'emoticons template paste textcolor colorpicker  imagetools'
        ],
        mentions: {
            source:dat()//the default option was [{ name: 'Messi'},{name:'Jason'},......]
        },})

so really what i need to do is to convert dat() return part to be just like the default and i'm really thankful for helping me

Answer 1

So your success function is a callback function it's not fired before your dat function completes. So the dat function doesn't return anything. Try this add asyc: false so the method waits.

 function dat() {
     var retdat;
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetUsers",
            data: "{}",
            contentType: "application/json;        charset=utf-8"
            async:false
            dataType: "json",
            success: function (data) {
             alert(data.d);//show me this alert "[{name:'Messi'},{name:'Jason'},{name:'Omar'},{name:'Eren'}]"
                retdat = data.d;
            },
            error: function (data) {
                return "";

            }
        });
       return retdat;
    }

You should not need this but to answer the title of your question you would use JSON.parse()

You could also move the tiny mce init function to execute in the success function and you could then keep the call async.

Answer 2

I found the answer to my question.

What i needed is the eval() function. I replaced source:dat() with source: eval(dat()) and everything works fine.

Answer 3

you can try

 function dat() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetUsers",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
             alert(data.d);//show me this alert "[{name:'Messi'},{name:'Jason'},{name:'Omar'},{name:'Eren'}]"
             var result = JSON.parse(data.d);
              //or you can do without do statically like split(data.d,'"'); then whatever result you get can return that is also
                return result;
            },
            error: function (data) {
                return "";

            }
        });
    }

Answer 4

The data itself is already in the correct format.

Since the data is fetched asynchronously you have to call the process method in your callback to pass the data back to the plugin. This is explained in more detail here .