如何使用 Js 在循环中动态生成 JSON？

Question

我正在用PebbleJS 做一个项目。

我是一个菜鸟，我正在一点一点地学习..所以在从网页接收 JSON 并将所有数据放入 localStorage 对象后，我想将我的变量放入 UI.Menu 窗口，即基本上是一个 JSON 变量，如下例所示：

var main = new UI.Menu({
sections: [{
  items: [
  {
    title: 'street name a',
    subtitle: 'ID 1121'
  }, {
    title: 'street name b',
    subtitle: 'ID 1431'
  }, {
    title: 'street name c',
    subtitle: 'ID 1907'
  },{
    title: 'street name d',
    subtitle: 'ID 1002'
  },{
    title: 'street name e',
    subtitle: 'ID 1330'
  },

        ]
}]
}); 

我试图在内部进行循环，但给了我错误...（伪代码）

for (var x=0;x<10;x++)
  {
    title: localStorage.title+x,
    subtitle: 'ID '+localStorage.title+x
  }

我需要在没有 jQuery 或其他 JS 框架的情况下制作这个，只有纯 javascript...

Answer 1

如果我正确理解您的问题，您想通过循环从您的第一个代码示例创建数据结构。

数据结构是一个具有一些属性和子对象（如数组）的对象。该结构仅在您的代码中定义对象。不涉及 json。

json 是 javascript 的一个子集，用于交换数据结构。它由仅带有 javascript 对象声明的纯文本文件组成，通常被解析以在内存中创建数据结构。通过在代码中声明您的数据结构，无需使用额外的 json 解析步骤。

要像上面那样设置初始结构：

var data = {
    sections: [
        {
            items: []
        }
    ]
}

比你得到的 items 数组：

var items = data.sections[0].items

您可以在这个数组中添加带有循环的项目：

for ( var x = 0; x < 10; x++ ) {
    var item = {
      title: localStorage.title + x,
      subtitle: 'ID ' + localStorage.title + x
    };

    items.push(item);
}

现在您可以使用数据对象构建您的 UI.Menu。

var main = new UI.Menu(data)