如何将变量从 php 传递给 js 作为变量（名称）本身而不是字符串？答案

【问题标题】：How can I pass a variable from php to js as a variable (name) itself instead a string?如何将变量从 php 传递给 js 作为变量（名称）本身而不是字符串？
【发布时间】：2017-09-21 12:38:26
【问题描述】：

我通过 ajax 将数据从 php 传递到 js。我在传输之前使用 json_encode。这里是例子：

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

从客户端我得到这个没有任何问题：

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

但我需要组件是变量名而不是字符串，例如：

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

这可能吗？如果是，我该怎么做？

【问题讨论】：

JSON.encode 不是函数。在PHP 或JavaScript 中。
How to get jSON response into variable from a jquery script的可能重复
是的，你是对的@Script47 它实际上是 json_encode()。
目前无法实现您的要求。您必须编写自己的 JSON 编码版本，并以某种方式标记哪些值是 JS 使用的变量。这将破坏 JSON 的目的和标准化使用，因此您不能再将其称为 JSON。

标签： javascript php arrays json ajax

【解决方案1】：

您需要将从服务器获得的响应转换为扩展数据结构，并将组件名称替换为真实组件实例。为此，请确保组件在辅助对象映射中可用，并且可以通过其名称访问各个组件对象。

这是这种方法的简单示例：

// 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%}

【讨论】：

@dsfq 在我的例子中，组件：值（必须）代表一个导入的对象。该组件没有使用 name 属性。我误会了吗？
这只是一个例子，只是一些对象（带有道具name），它可以是你需要的任何东西。导入您的对象，甚至可能首先将它们导出为地图，完成。
进口的很多。我将它们导入：import test1 from '../../components/test1';。我如何首先将它们导出为地图
哇！现在这对我有用。首先，我像往常一样在开头使用import test1 from "test1" 导入测试。然后我按照你所说的创建了组件对象并将导入放入其中。 const components = { test1, test2, test3 }。然后我使用了你给的 mapComponents 循环。瞧！有用。非常感谢@dfsq。我真的很感激。
酷，很高兴你想通了 :)

【解决方案2】：

您可以通过window[obj.component] 实现它。像这样

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);

【讨论】：

实际上这是由 webpack 节点而不是浏览器预渲染的。因此这无济于事。
@Skeletor ：你在说什么，不清楚。请具体说明您要在 php 或 javascript 中替换变量的位置，我想现在您想将字符串替换为 php 中的变量？
它是客户端。我想替换 javascript 端的变量。我将它用于需要组件值是对象（通常是导入的对象）的 vue 组件。我尝试了 window[] 但它对我不起作用，它返回未定义。
用 vuejs 做一个现场演示

【解决方案3】：

您可以为所需的字段分配新值

PHP 代码

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


echo json_encode($data);



?>

php 代码输出

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

并在 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)

在控制台输出类似

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

【讨论】：