How can I pass a variable from php to js as a variable (name) itself instead a string?

Question

I am passing data from php to js via ajax. I use json_encode before the transfer. here the example:

$data = [
    [
        "path" => "/TestMenu1",
        "component" => 'test1',
        "children" => [[
            "path" => "/api/sub/route",
            "component" => "test2",
        ]]
    ],[
        "path" => "/api/findme/2",
        "component" => "test3",
    ]
];

And from client side I get this without any problems:

[
  {
    "path": "/TestMenu1",
    "component": "test1",
    "children": [
      {
        "path": "/api/sub/route",
        "component": "test2"
      }
    ]
  },
  {
    "path": "/api/findme/2",
    "component": "test3"
  }
]

But I need the components to be variable names instead string like:

[
  {
    "path": "/TestMenu1",
    "component": test1,
    "children": [
      {
        "path": "/api/sub/route",
        "component": test2
      }
    ]
  },
  {
    "path": "/api/findme/2",
    "component": test3
  }
]

Is that possible? If yes how can I accomplish that?

JSON.encode is not a function.in either PHP or JavaScript. — Script47
– Script47, Commented Sep 21, 2017 at 12:39
Possible duplicate of How to get jSON response into variable from a jquery script — Masivuye Cokile
– Masivuye Cokile, Commented Sep 21, 2017 at 12:42
What you are asking is not currently possible. You would have to write your own version of JSON encode and somehow mark which values are variables for use by JS. This would defeat the purpose and standardized use of JSON so you cannot call it JSON anymore. — MonkeyZeus
– MonkeyZeus, Commented Sep 21, 2017 at 12:44

dfsq · Accepted Answer · 2017-09-21 12:55:11Z

1

You will need to make intermediate transformation of response you get from server to extended data structure with component name replaced with real component instance. For this make sure components are available in helper object map and individual component objects are accessible by its name.

Here is simple example of this approach:

// Response you get from server
const response = [
  {
    "path": "/TestMenu1",
    "component": "test1",
    "children": [
      {
        "path": "/api/sub/route",
        "component": "test2"
      }
    ]
  },
  {
    "path": "/api/findme/2",
    "component": "test3"
  }
]

// Map of component name to component instance
const components = {
  test1: { name: 'test1' },
  test2: { name: 'test2' },
  test3: { name: 'test3' }
}

// Recursive function to resolve component by its name from the map
const mapComponents = (items, componentMap) => {
  return items.map(item => {
    item.component = componentMap[item.component]
    
    if (item.children && item.children.length) {
      item.children = mapComponents(item.children, componentMap)
    }
    
    return item
  })
}

// Final result
const result = mapComponents(response, components)

console.log(result)

.as-console-wrapper {min-height: 100%}

answered Sep 21, 2017 at 12:55

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Skeletor Over a year ago

@dsfq In my case the component: value (has to) represents an imported object. The component has no use of name prop. Did i misunderstand you?

dfsq Over a year ago

It was just an example, just some object (with prop name), it can be whatever you need. Import your objects, maybe even export them in the first place as a map, done.

Skeletor Over a year ago

There are a lot of imports. I import them with: import test1 from '../../components/test1'; . how can I export them in the first place as a map

Skeletor Over a year ago

Woww! now that worked for me. First I imported tests as usual with import test1 from "test1"at the beginning. Then I created components object as you said and put the imports in it. const components = { test1, test2, test3 }. And then I used the mapComponents loop you gave. Voila! it works. Huge thanks @dfsq . I really appreciate that.

dfsq Over a year ago

Cool, glad you figured it out :)

Niklesh Raut · Accepted Answer · 2017-09-21 12:55:03Z

1

You can achieve it by window[obj.component]. like this

var test1 = 111;
var test2 = 222;
var test3 = 333;
var response = [
  {
    "path": "/TestMenu1",
    "component": "test1",
    "children": [
      {
        "path": "/api/sub/route",
        "component": "test2"
      }
    ]
  },
  {
    "path": "/api/findme/2",
    "component": "test3"
  }
];
var newObj = [];
function getCompenentVal(obj){
  obj.component = window[obj.component];
  if(obj.children !== undefined){
    var temp = [];
    for(var i in obj.children){
      temp.push(getCompenentVal(obj.children[i]));
    }
    obj.children = temp;
  }
  return obj;
}
for(var i in response){
  newObj.push(getCompenentVal(response[i]));
}
console.log(newObj);

answered Sep 21, 2017 at 12:55

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

4 Comments

Skeletor Over a year ago

actually this is prerendered by webpack node instead browser. thus that wont help.

Niklesh Raut Over a year ago

@Skeletor : what you are saying, is not clear. please be specific that where you want to replace variable in php or javascript, I think now you want to replace string as variable in php ?

Skeletor Over a year ago

It is client side. I want to replace the variable in the javascript side. I am using this for a vue component which requires the component value to be a object (generally imported one). I tried the window[] but it does not work for me, it returns undefined.

Niklesh Raut Over a year ago

Just make one live demo with vuejs

Dinesh Kumar · Accepted Answer · 2017-09-21 13:36:13Z

you can assign new value to the field you want

Php code

$data = [
    [
        "path" => "/TestMenu1",
        "component" => 'test1',
        "children" => [[
            "path" => "/api/sub/route",
            "component" => "test2",
        ]]
    ],[
        "path" => "/api/findme/2",
        "component" => "test3",
    ]
]; 


echo json_encode($data);



?>

output from php code

[{"path":"\/TestMenu1","component":"test1","children":[{"path":"\/api\/sub\/route","component":"test2"}]},{"path":"\/api\/findme\/2","component":"test3"}]

and with the output in javascript

var data = '[{"path":"\/TestMenu1","component":"test1","children":[{"path":"\/api\/sub\/route","component":"test2"}]},{"path":"\/api\/findme\/2","component":"test3"}]';

var newdata = JSON.parse(data);
newdata.forEach(function(values) {
    values.component = 'new value'

     if(values.children!=undefined) {
         values.children.forEach(function(innervalues) {
              innervalues.component = 'new value'
         })
    }
});

console.log(newdata)

output in console like

   [
  {
    "path": "/TestMenu1",
    "component": "new value",
    "children": [
      {
        "path": "/api/sub/route",
        "component": "new value"
      }
    ]
  },
  {
    "path": "/api/findme/2",
    "component": "new value"
  }
]

Collectives™ on Stack Overflow

How can I pass a variable from php to js as a variable (name) itself instead a string?

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related