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

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?

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

</div>