Json response in javascript

[Mr.M]

Hi Dw, I want to get the keys and data of the php json response, heres the response I get

{"content":{"1":{"title":"Present","start":"2025,01,29","end":"2025,01,29","backgroundColor":"#f39c12","borderColor":"#f39c12"}}}

all I'm interested in starts from title.

[Biiim]

This is what i'm using for AJAX requests - it needs jQuery:

var data = [];
data.var = 'test';
$.ajax({
    type: "POST",
    data: {data:data},
    url: connectProtocol+"://"+currentHost+"/linkToAjaxFile.php",
    success: function(msg){
        responseData = $.parseJSON(msg);
        console.log(responseData);
        if(responseData['status'] == 'success'){
            //do something
            $('#someModalWindow').modal('hide');

        }else{
            alert(responseData['message']);
        }
    }
});

I guess the direct answer would be using jQuery for $.parseJSON(msg);

[Mr.M]

I also have to mention that the response will also be a multi-array

[Langflow]

Hi! You can decode the JSON response in PHP by using json_decode($response, true); to get an associative array and then get the keys by using array_keys($data) and access values as needed!

[Dani]

Sorry, I'm confused. Do you want to decode the JSON in PHP or in Javascript?

[Mr.M]

@Dani, I wanted to decode it, basically @BIIM has provided something that helped me out, the problem now is that I've seen that I am facing an issue with how the data is, so now I want the end data to be like this

Content{events[{title: myeventtitleFromDatabase, start: myeventstartDateFromdatabase, end: endDateFromDatabase}]}

// The above is a basic sample but the above can have multiple objects inside events like below 

Content{events[{title: myeventtitle, start: startDate, end: endDate}, {title: myeventtitle, start: startDate, end: endDate}, {title: myeventtitle, start: startDate, end: endDate}]}

On my current code in my php file which gets the data from database is as follows

While($row = mysqli_fetch_array($myquery)){
$CalendarEvents[$i]['title'] = $row['mytitle'];
// dates are also retrieved similar and added to CalendarEvents array. 
}

$data = array(
'status' => 'success', 
'content' => $CalendarEvents
);
echo json_encode($data);

Now what I'm trying to achieve at the end is be able to display all the events associated or returned with that query at that time. The problem with my current code which works but the iasue is that it only shows 1 event because I can't do a loop inside the calendar function where I need to assign these values to.

The calendar code is a but long but

My Js code which is where I want to use this data to

$.post(/myphpfile.php),{
type: "requestType", 
param: paramValue
}, function (data, status){
//Using @BIIM's solution
Var responseData = $.parseJSON(data);
Var rdata = responseData['content'];
Var eventsx = new Array();

$.each (rdata, function(i, item){
eventsx.push({
title: rdata[i].title, 
start: rdata[i].start,
end: rdata[i].end
});
});

// Now the calendar 

var date = new Date()
var d = date.getDate(), 
m = date.getMonth(), 
y = date.getFullYear()
$('#calendar').fullCalendar({
header : {
left: 'prev, next, today', 
center :'title', 
right: 'month, agendaWeek, agendaDay'
}, 
buttonText: {
today: 'today', 
month: 'month', 
week: 'week', 
day: 'day'
}, 
// Now this where I want to use that data to. Note how I'm hard coding it to use [0] which should be dynamic so that it can also get [1],[2],etc if the objects are more than one returned 


events:[{
title: eventsx[0]['title'],
start: eventsx[0]['start'],
end: eventsx[0]['end']
}],
editable :true, droppable: true, drop: function (date, allDay){
var originalEventObject = $(this).date('eventObject')
var copiedEventObject = $. extend({}, originalEventObject)

copiedEventObject.start = date
copiedEventObject.allDay = allDay
$('#calendar').fullCalendar('renderEvents',copiedEventObject, true)
}
})
}

//Also since we are here, I want to create new calendar each time this code is called and override previous calendar. I don't want it to include other calls events but it must always be new.

[Biiim]

Should be

events: responseData['content']

And rdata is being made as an array of objects (should be same as the previous, but responseData might be an object of objects) so to use rdata it definitely would be:

events: rdata

A dream to get sanity would be to do console.log(responseData); to see exactly what you've got. And keep using it to see at each error point what is happening.

I'm mobile now so will paste my working code when I get on a desktop unless you get it working before then.

You may need to keep the loop on rdata to preprocess the dates into the correct format. Full calendar might just error out with improper format and not say anything, the console can give a clue sometimes.

The incrementing keys in the array should be preserved from PHP.

Edit: and the calendar should also have a destroy method to reset and make a new calendar afterwards. May not be destroy but something like that, or just empty out the events and then put in new ones?

[Dani]

If Biim had provided a working solution, I’ll mark this question as solved.