How do I remove double quotes from a multidimensional array?

Q: Did you find the same question asked before?

A: Yes, here’s the link to the question exactly looks like mine but the answers are not applicable because it converts the string to a number.

Q: Why do you need to remove the double quotes?

A: Because I need to follow the syntax allowed for moment js.

Q: Did you try removing the double quotes from the provider/backend?

A: Yes, as you can see in the Backend Code snippet below, it didn’t work from what I tried (this question accepts solutions in either javascript or PHP).

Q: What have you tried using JavaScript?

A: I tried this one but it didn’t work as you will also see in the attachment.

const timeIntervalsData = [
  [
    "moment({ hour:6, minute:45 }), moment({ hour:7, minute:45 })",
  ],
  [
    "moment({ hour:10, minute:30 }), moment({ hour:11, minute:30 })",
  ],
]

let string = JSON.stringify(timeIntervalsData)
string.replace (/"/g,'')

Moving on to the actual code

This is where I will put the multidimensional array:

const timeIntervalsData = []

// the `timeIntervalsData` array will hold the 
// response of the ajax call from my backend/provider

$.ajax({
    type: 'POST',
    url: 'call-url-of-backend',
    data: {_token: CSRF_TOKEN},
    dataType: 'JSON',
    success: function (data) {
        if (data.status == true) {
            timeIntervalsData = data.time
        }
    },error: function(xhr, status, error) {
        var r = jQuery.parseJSON(xhr.responseText)
        console.log(r.message)
    }
})

let options = {
    format: 'hh:mm A',
    // here is where I load the multidimensional array
    disabledTimeIntervals: timeIntervalsData,

    // original syntax 
    // from https://getdatepicker.com/4/Options/#disabledtimeintervals 
    // and https://momentjs.com/docs/#/parsing/object/
    disabledTimeIntervals: [
        [moment({ hour:6, minute:45 }), moment({ hour:7, minute:45 })],
        [moment({ hour:10, minute:30 }), moment({ hour:11, minute:30 })],
    ],
}

$('.datetimepicker').datetimepicker(options)

Backend Code:

$user = User::find(1);
$schedules = Schedule::select('start_time', 'end_time')
    ->whereBelongsTo($user)
    ->where('weekday', 1)
    ->get()
    ->toArray();

$collection = collect($schedules)->map(function ($time) {
    return [date("g:i", strtotime($time['start_time'])), date("g:i", strtotime($time['end_time']))];
});

$data = $collection->values()->all();

$carrier = [];

foreach ($dataas $key => $a) {
  $detail1 = preg_split('/:/i', $a[0]);
  $detail2 = preg_split('/:/i', $a[1]);

  // here I try to remove " using str_replace
  array_push($carrier, array(str_replace('"', "", 'moment({ hour:'.$detail1[0].', minute:'.$detail1[1].' }), moment({ hour:'.$detail2[0].', minute:'.$detail2[1].' })')));
}

return response()->json([
    'status' => true,
    'time' => $carrier,
], 200);

// `$carrier` result
[
  [
    "moment({ hour:6, minute:45 }), moment({ hour:7, minute:45 })",
  ],
  [
    "moment({ hour:10, minute:30 }), moment({ hour:11, minute:30 })",
  ],
]

EDIT

This edit provides the result of testing KooiInc’s code

const timeIntervalsData = JSON.stringify({
    moments: [
        { hour: 6, minute: 45 }, { hour: 7, minute: 45 },
        { hour: 10, minute: 30 }, { hour: 11, minute: 30 }
    ]
});

let options = {
    format: 'hh:mm A',
    disabledTimeIntervals: [
        JSON.parse(timeIntervalsData).moments.forEach( interval => moment(interval) )
    ],
}

console.log(options)

Console result

EDIT #2

I’ve edited the question to show the result of KooiInc’s updated answer.

const timeIntervalsData = JSON.stringify( { moments: [ 
  { hour: 6, minute: 45 }, { hour: 7, minute: 45 },
  { hour: 10, minute: 30 }, { hour: 11, minute: 30 } ] 
});

JSON.parse(timeIntervalsData).moments.forEach( interval => 
  console.log(moment(interval)) );

let options = {
    format: 'hh:mm A',
    disabledTimeIntervals: [
        JSON.parse(timeIntervalsData).moments.map( interval => moment(interval) )
    ],
}

console.log(options);

Now I remember why I’m trying to format the moment in my backend code because mapping the object is combining the moment’s time intervals into a single array like below, and because of this it completely ignores the 3rd and 4th moment time intervals and the 1st and 2nd-time intervals are only disabled.

Using the code above…

// console.log(options.disabledTimeIntervals); result
disabledTimeIntervals: [
    [M, M, M, M] // we can see here that the map combined it into a single array, the first two times are disabled but the 3rd and 4th moment is not working.
],

in this hardcoded moment time intervals, it’s not combining into a single array.

disabledTimeIntervals: [
    [moment({ hour:6, minute:45 }), moment({ hour:7, minute:45 })],
    [moment({ hour:10, minute:30 }), moment({ hour:11, minute:30 })]
],

// console result
disabledTimeIntervals: [
    [M, M],
    [M, M]
]

Answer

JSON (JavaScript Object Notation) is always a string representation. You can’t store function calls as function calls within it.

So, rethink your code and deliver another object you can use client side. Let the server deliver moments as an array of arrays, containing intervals ([begin, end]) and use moment client side.

Something like:

// server delivers object with property
// 'moments', containing an array of arrays ([start, end])
const timeIntervalsData = JSON.stringify( { moments: [ 
    [ { hour: 6, minute: 45 }, { hour: 7, minute: 45 }, ],
    [ { hour: 10, minute: 30 }, { hour: 11, minute: 30 }, ]  
  ]
});

// based on comments
// -----------------
let options = {
    format: 'hh:mm A',
    disabledTimeIntervals: JSON.parse(timeIntervalsData)
      .moments
      .map( ([start, end]) => [ moment(start), moment(end) ] )
//    ^ mapping the individual intervals (start, end)
}

console.log(options.disabledTimeIntervals);

.as-console-wrapper { max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Advertisement

Answer