Leveraging JavaScript variables conditionally within a JSON object

Within the code snippet below, there is a condition written as 

(if (epsflag==0)<?php $a=",hide:'true'";?> )
. I am looking to achieve the same condition using JavaScript. Essentially, I want to conditionally utilize a JavaScript variable in my JSON structure. Any assistance with this matter would be greatly appreciated. If my question is unclear, please do not hesitate to let me know.

{display: 'Wave Name', name : 'wavename', sortable : true, align: 'left'<?php echo "$a"?>}

<script type="text/javascript>
function rowdata(epsflag,respflag){
    if (epsflag==0) {
        <?php $a=",hide:'true'";?>
    } else {
        <?php $a=",hide:'false'";?> 
    }

$("#flex1").flexigrid({
    url: myurl, 
    dataType: 'json',
    colModel : [
        {display: 'Nr.', name : 'nr',  sortable : true, align: 'center',width:25},
        {display: 'Datum', name : 'consultationdate',  sortable : true, align: 'left'},
        {display: 'Wave Name', name : 'wavename',  sortable : true, align: 'left'<?php echo "$a"?>},
        {display: 'Name', name : 'respname',  sortable : true, align: 'left'},
        {display: 'E-mail', name : 'email',  sortable : true, align: 'left',width:180},
        {display: 'Telefoon', name : 'telefoon',  sortable : true, align: 'left'},
        {display: 'Medewerker', name : 'consultationwith',  sortable : true, align: 'left'}
    ],  
});

}

javascriptjson

Answer №1

It appears there may be a misunderstanding regarding the functionality of web technologies.

PHP is essentially a language dedicated to processing strings. Its primary function is string manipulation and generation. In this context, JavaScript can be seen as a large string when interacting with PHP. To simplify this concept, let's replace the JavaScript code with a basic test string like "bla bla bla..":

bla bla bla bla bla bla
<?php $a=",hide:'true'";?>
bla bla bla bla bla bla
<?php $a=",hide:'false'";?>
bla bla bla bla bla bla
<?php echo "$a"?>
bla bla bla bla bla bla

If we streamline this further:

<?php
    $a=",hide:'true'";
    $a=",hide:'false'";
    echo "$a";
?>

Executing this in PHP results in outputting the string:

bla bla bla bla bla bla    // note: no actual output here
bla bla bla bla bla bla
,hide:'false'
bla bla bla bla bla bla

By replacing the "bla bla" with a simplified version of your original content, the output transforms into:

<script type="text/javascript">
function rowdata(epsflag,respflag){
    if (epsflag==0) {
                    // note: missing output from PHP
    }
    else {
                    // note: missing output from PHP
    }

    $("#flex1").flexigrid({
      colModel : [
        {align:'left',hide:'false'}  // logically, always false
      ]
    });
}

At this point, understanding that PHP does not process JavaScript and remains invisible to the browser leads us back to the fundamental distinction between client-side and server-side programming, exemplified elsewhere (source).

Now equipped with a clearer grasp of web mechanisms, how do we address your issue?

Considering your particular case, it seems unnecessary to transmit data back to PHP. Instead, you aim to modify a value within a JavaScript object. Why complicate matters by involving PHP when JavaScript can directly handle these changes? Here's an adjustment solely in JavaScript:

var wavedata = {
    display: 'Wave Name',
    name : 'wavename',
    sortable : true
};

if (epsflag==0) {
    wavedata.hide = 'true';
}
else {
    wavedata.hide = 'false';
}  


$("#flex1").flexigrid({
    colModel : [
        // other data
        wavedata,
        // other data
    ]
});

Alternatively, for maintaining similarity to your existing structure while setting 'true' or 'false' as strings, consider Grundy's suggestion rewritten slightly:

{/* ... */ align: 'left',hide: epsflag==0 ? 'true' : 'false'}

Answer №2

Perhaps this could be useful:

function rowData(epsFlag, respFlag){

    $("#flex1").flexigrid(
    {

    url: myURL, 
    dataType: 'json',
    colModel : [
        {display: 'Nr.', name : 'nr',  sortable : true, align: 'center', width:25},
        {display: 'Datum', name : 'consultationdate',  sortable : true, align: 'left'},
        {display: 'Wave Name', name : 'wavename',  sortable : true, align: 'left', hide: (epsFlag==0)},
...

UPDATE

If you prefer not to use a variable inside the object, you can try something like this:

function rowData(epsFlag, respFlag){

    var colModel = {};
    if(epsFlag == 0){
        colModel = [
            {display: 'Nr.', name : 'nr',  sortable : true, align: 'center', width:25},
            {display: 'Datum', name : 'consultationdate',  sortable : true, align: 'left'},
            {display: 'Wave Name', name : 'wavename',  sortable : true, align: 'left', hide: true }
            ...
    }else{
        colModel = [
            {display: 'Nr.', name : 'nr',  sortable : true, align: 'center', width:25},
            {display: 'Datum', name : 'consultationdate',  sortable : true, align: 'left'},
            {display: 'Wave Name', name : 'wavename',  sortable : true, align: 'left', hide: false }
            ...
    }

    $("#flex1").flexigrid(
    {

    url: myURL, 
    dataType: 'json',
    colModel : colModel,
    ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to execute a function once another function has been called within a specific interval

Currently, I am working on a Greasemonkey script and have encountered an issue. The website contains a function that runs at regular intervals: jQuery(function1.run); setInterval(function1.run, function1.interval); I aim to execute my function immediatel ...

javascriptjquerygreasemonkey

Initiate a series of tasks and await their completion using RxJS / Redux Observables

My app requires an initialisation action to be fired, followed by a series of other actions before triggering another action. I found a similar question on Stack Overflow However, when attempting this approach, only the initial APP_INIT action is executed ...

javascriptreduxrxjsrxjs6redux-observable

Pictures in the portfolio failing to load on Mozilla Firefox

Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this ...

javascriptcsswordpressimagefirefox

Prevent specific fields from being saved in Node MongoDB native

When working with MongoDB and using the node mongodb native driver to insert documents, I have encountered an issue. The objects I am inserting have fields that I do not want to be saved in the database: var x = { field: 'value', _nonPersist ...

javascriptnode.jsmongodb

ERROR UnhandledTypeError: Unable to access attributes of null (attempting to retrieve 'pipe')

When I include "{ observe: 'response' }" in my request, why do I encounter an error (ERROR TypeError: Cannot read properties of undefined (reading 'pipe'))? This is to retrieve all headers. let answer = this.http.post<ResponseLog ...

javascriptangulartypescript

Integrate a @Component from Angular 2 into the Document Object Model of another component

One of my components is called TestPage import { Component } from '@angular/core'; @Component({ selector: 'test-component', template: '<b>Content</b>', }) export class TestPage { constructor() {} } Another ...

javascriptangular

Similar to LINQ's Enumerable.First(predicate) method but with a slightly different syntax, this

When working with JavaScript, we often encounter situations where we need to find the first matching element based on certain conditions. Take for example this code snippet: function process() { var firstMatch = ['a', 'b', 'c&ap ...

javascriptarraysnode.jslinqfilter

What is the proper way to incorporate quotation marks within other quotation marks?

Is there a way to generate an ID within the myFunction() function in JavaScript? I need a single string to call an HTML script as a variable. Any corrections or suggestions are welcome. Here is a sample code snippet: <button class="tablinks" onclick=" ...

javascripthtml

What is the method for identifying the selected radio button that has been dynamically generated after clicking the submit button?

Despite this question being asked multiple times before, I am struggling to find a solution that fits my specific scenario. Initially, I have a static radio button that I create. The HTML code is as follows: <body> &l ...

javascriptjqueryhtml

The process of handling state in React when it goes live in production

Currently, I am delving into the world of ReactJS as a novice. The intricacies of state management have captivated my interest. A pressing question has surfaced in my mind regarding this topic. Let's consider a scenario - I have developed a React appl ...

javascriptreactjs

Trying to work through solving the issue of accessing document.frames["someframe"].function in Chrome instead of IE

I am encountering an issue with my code that is working in Internet Explorer but not in Chrome. try { top.document.frames["myFrame"].compare(); } catch(err) { alert("This is not executed."); } Any suggestions on how to resolve this compatibility pr ...

javascriptjqueryinternet-explorergoogle-chrome

interactive navigation menu with countdown feature

Looking to create an HTML/jQuery dropdown menu, but encountering a problem. The goal is for the div to slide down when the mouse hovers over the "games" navigation button and only disappear after 5 seconds of the mouse being out, not instantly. Here's ...

javascriptjqueryhtmlmenunavigation

Is there a way to halt or end an interval within a function triggered by useEffect()?

I am currently working on a countdown timer script using react.js. The timer displays a 3 or 5 seconds countdown before starting, with data for these countdowns coming from another component. I am facing an issue with controlling the main countdown timer ...

javascriptreactjsreact-hookssetintervaluse-effect

The export button in the React Material Table doesn't seem to be displaying correctly

[I am encountering an issue with the React export button in Material Table. The bar is not showing completely. My code includes the following: options = {{exportButton:true}} How can I resolve this?]1 ...

javascriptreactjsmaterial-uimaterial-table

Design a dynamic table using JavaScript

After spending hours working on my first JavaScript code, following the instructions in my textbook, I still can't get the table to display on my webpage. The id="eventList" is already included in my HTML and I've shortened the arrays. Here' ...

javascriptcssecmascript-6html

The Ajax page does not respond to click events when the function is declared within $(function(){ }) block

Create two functions as shown below: <script> $(function () { function myFunctionB() { alert("ddd"); } }) function myFunctionA() { alert("ddd"); } </sc ...

javascriptjqueryajaxfunction

Opera GX Modification Problem: Root element followed by unexpected data

I'm encountering an issue while creating a custom Opera GX mod. The error message states "Manifest is not valid JSON. Line: 37, column: 6, Unexpected data after root element." I've exhausted all my troubleshooting options. Below is the snippet of ...

json

Guide on adding an item to the end of an array with an arrow function

const appendElement = (item) => { return (list) => { }; }; Add a new item to the end of the list. Parameters item (any): The item to add. Output (Array) => Array: Generates a closure that duplicates the original list with the added ite ...

javascriptfunctionpush

The perpetual loop in React context triggered by a setState function within a useEffect block

I'm experiencing an endless loop issue with this context component once I uncomment a specific line. Even after completely isolating the component, the problem persists. This peculiar behavior only manifests when the row is discounted and the browser ...

javascriptreactjsnext.jsreact-hooks

Attempting to display JSON data retrieved from a decoded base64 string in Python

After attempting to decode a value using base64, my goal is to use the decoded strings individually. Here is an example of my decoded base64 data: { "trailerColor": "FF0017", "complete": 59, "bounds": [ 25, 65, 62, 5 ], "Stamina" ...

pythonjsonbase64