在这种情况下如何处理数据驱动的输入？

Question

我正在开发一个包含左右两个导航面板的小网页。

leftNav：包含花名称列表。

rigtNav：拥有一堆与花相对应的图像。

喜欢这个 -

|'''''''''''''''|''''''''''''''''''''''''''''''''''''''|
|               |                      Pics of Flower1 |
|  |'''''''|    |       |'''''|           |'''''|      |
|  |flower1|    |       |  A  |           |  C  |      |
|               |       |.....|           |.....|      |
|  |'''''''|    |                                      |
|  |flower2|    |                                      |
|               |       |'''''|           |'''''|      |
|  |'''''''|    |       |  B  |           |  D  |      |
|  |flower3|    |       |.....|           |.....|      | 
|               |                                      |
|...............|......................................|

Demo

我的问题是 - 如果我必须将其设为数据驱动页面。从数据库获取的输入，从后端获取数据以呈现页面的有效方法是什么？

我正在考虑使用以下格式创建一个json对象 -

var data = {
    "Lotus" : [ "a1.jpg", "a1.jpg", "a1.jpg", "a1.jpg"  ], 

    "Orchid" : [ "o1.jpg", "o1.jpg", "o1.jpg", "o1.jpg"  ], 

    "Tulip" : [ "t1.jpg", "t1.jpg", "t1.jpg", "t1.jpg"  ], 

    "Rose" : [ "r1.jpg", "r1.jpg", "r1.jpg", "r1.jpg"  ], 
};

这是一个好方法吗？谁能建议我一个更好的方法？

Answer 1

JSON的思维方式是构建一个稍微复杂一些的对象，其属性描述了每个东西的确切含义。下面我们有一个对象数组：

var data = [
  {
    "name": "Lotus",
    "images": [ "a1.jpg", "a1.jpg", "a1.jpg", "a1.jpg"  ]
  },
  {
    "name": "Orchid",
    "images": [ "o1.jpg", "o1.jpg", "o1.jpg", "o1.jpg"  ]
  }
];

您可以循环浏览此数组并获取data[0].name和data[0].images[1]的信息。