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

Question

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

leftNav：保存花名列表。

rigtNav：保存一堆与花对应的图像。

像这样 -

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

演示

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

我正在考虑创建一个具有以下格式的 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]。