Question

我通过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
  }
]

这可能吗？如果是，我该如何实现？

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

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

以下是此方法的简单示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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"
  }
]

Answer 4

您可以创建一个对象：

var myObjectList = {};
myObjectList["test2"] = function() { alert(1) };

var myComponent = myObjectList["test2"];
myComponent();

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

4 个答案: