CODEWITHSUNDEEP
javascriptjqueryajaxjson
Shairyar
Shairyar

Reputation: 3356

alert part of AJAX response

I am using JS to submit data without loading the page and it is working fine, on response i am trying to send JSON which looks like this

{"mes":"<div class=\"alert alert-success\">Your goal has been updated.<\/div>","graph_data":"[['07\/9\/2014',500],['07\/8\/2014',900],['07\/7\/2014',1200],['07\/6\/2014',500],['07\/5\/2014',500],['07\/4\/2014',500],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000]]"}

There are two items in the JSON response mes and graph_data. Now how can i make use of graph_data and mes seperately?

If I do this alert(data); this shows the above JSON response

But if I do the following I cant get them to alert seperately.

alert(data.graph_data);
alert(data.mes);

I will really appreciate if anyone can guide me on how to separate the two.

Update

This is the JS i am using to send and retrieve data on click of a button

$('#goalgraphdatasubmit').click(function () {
    $('#goalgraphupdateform').submit();
});
$('#goalgraphupdateform').submit(function (e) {
    "use strict";
    e.preventDefault();
    document.getElementById("goalgraphdatasubmit").innerHTML = "saving..";
    var post = $('#goalgraphupdateform').serialize();
    var action = $('#goalgraphupdateform').attr('action');
    $("#holiday_goal_message").slideUp(350, function () {
        $('#holiday_goal_message').hide();
        $.post(action, post, function (data) {
            $('#holiday_goal_message').html(data);
            document.getElementById('holiday_goal_message').innerHTML = data;
            $('#holiday_goal_message').slideDown('slow');
            document.getElementById("goalgraphdatasubmit").innerHTML = "Submit";
            alert(data);
            if (data == '<div class="alert alert-success">Your goal has been updated.</div>') {

                //$('#divGoal').load('dashboard-goals.php');
                $("#holiday_goal_message").hide(2000);
                updatetestGraph();
            }

        });
    });
});

Upvotes: 0

Views: 132

Answers (2)

cracker
cracker

Reputation: 4906

Use Like

var data = JSON.parse('{"event1":{"title":"My birthday","start":"12\/27\/2011 10:20 ","end":"12\/27\/2011 00:00 "},"event2":{"title":"My birthday again","start":"12\/27\/2011 10:20 ","end":"12\/27\/2011 00:00 "}}');

arr = []
for(var event in data){
    var dataCopy = data[event]
    for(key in dataCopy){
        if(key == "start" || key == "end"){
            // needs more specific method to manipulate date to your needs
            dataCopy[key] = new Date(dataCopy[key])
        }
    }
    arr.push(dataCopy)
}

alert( JSON.stringify(arr) )

Demo1 Demo2

Upvotes: 1

Knight Rider
Knight Rider

Reputation: 188

Sorry cannot comment so have to answer

I have taken your JSON string in a variable here and it gives me proper result See here

 var d = {"mes":"<div class=\"alert alert-success\">Your goal has been updated.    <\/div>","graph_data":"[['07\/9\/2014',500],['07\/8\/2014',900],['07\/7\/2014',1200],['07\/6\/2014',500],['07\/5\/2014',500],['07\/4\/2014',500],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000],['07\/11\/2014',2000]]"};
 alert(d.graph_data);
 alert(d.mes);

Upvotes: 0

Related Questions