Question 36985 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can you store js code on the fly in a variable and have js read it? – Jquery

I’m not sure if what I’m trying to do is the correct/valid approach to what I’m trying to accomplish; essentially, I’m retrieving data from a db via an ajax call, I want this data to populate a js library where the layout is something like

data[
 item{
   name: 'name',
   start_date: date,
   end_date: date
 },
item{
   name: 'name',
   start_date: date,
   end_date: date
 },
]

is there any way I can populate the code inside ‘data’ on the fly?
I was thinking with a loop to populate a variable which would hold the data and placing it like so

//this is hard coded, but the idea is that a loop would populate this with the necessary information
let items = "
item{
   name: 'name',
   start_date: date,
   end_date: date
 },
item{
   name: 'name',
   start_date: date,
   end_date: date
 }";

data[
 items 
]

Would this be a valid approach?
thanks in advance!

UPDATE:
For clarification, this what I have

$('#calendar').fullCalendar({
    defaultDate: today,
    eventLimit: true,
    events: [
        {
            title: 'Some event',
            start: '2022-08-31',
            end: '2022-08-31'
        },
        {
            title: 'Some event',
            start: '2022-08-31',
            end: '2022-08-31'
        }
    ]
});

What im trying to achieve is something like this

let allEvents = " 
        {
            title: 'Some event',
            start: '2022-08-31',
            end: '2022-08-31'
        },
        {
            title: 'Some event',
            start: '2022-08-31',
            end: '2022-08-31'
        }";
$('#calendar').fullCalendar({
    defaultDate: today,
    eventLimit: true,
    events: [
        allEvents;
    ]
});

Would this be possible?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    So, closing this question, thanks to @DaveNewton for the insight, it really clarified what I was supposed to do; I apologize for the confusion, my thought process essentially revolved around 'echoing' or 'printing' code in php.

    my approach was:

    $.ajax({  
  type: "GET",
  url: filethathandlesrequest.php,
  data: {
    data_to_be_sent: 'data',
  },
  success: function(response) {
    response = JSON.parse(response);
    eventsGotten = response.return_result;

    //this is where I create the object
    let eventsToDisplay = [];
    for (let index = 0; index < eventsGotten.length; index++) {
      const element = eventsGotten[index];
      let singleEvent = {title: element.description, start: element.start_date, end: element.end_date};
      eventsToDisplay.push(singleEvent);
    }
        
    if (response.return_code === 0) {
      if ($('#calendar').exists()) {
        loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function() {
          $('#calendar').fullCalendar({
            defaultDate: today,
            //editable: true,
            eventLimit: true, 
            events: eventsToDisplay // <-- this is where I use it; and it works!
          });
        });
      }
    } else { //you can ignore this, this is just to not display anything if my ajax request fails
    if ($('#calendar').exists()) {
      loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function () {
        $('#calendar').fullCalendar({
          defaultDate: today,
          //editable: true,
          eventLimit: true, 
          events: []
        });
      });
    }  
  }
});

  2. 0

    The approach I would take is to define a particular DOM element as a parent / container for the DOM elements which will represent each item. Iterate over the items array in your ajax response, and create DOM elements with jquery for each item. Something along the lines of $('<div>${currentItem.name}>/div>').appendTo(containerDiv);

    Login or Signup to reply.
  3. 0

    It seems you are asking if you can import data from a database and populate a JSON array in Javascript with it. The answer would be yes. In fact, I do this routinely to create Javascript front ends that can be quickly rendered and only talk to the database when necessary so you’re not waiting on it. You can use Jquery ajax calls to retrieve and write data. I like to have local variables with JSON formatted data which I use to run the app. The app can quickly read and write changes to these JSON arrays. Keep in mind if the page is reloaded or fails all the data to that point will be lost and the user will have to start over so you need to store data to the database at strategic intervals. You can also use HTML localStorage to store data in the browser itself. I’ve found this an efficient way to build single-page Javascript apps without resorting to React or some of the other frameworks. It’s not as efficient though, but easier to code and maintain.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search