Question

我有一个看起来像这样的外部json文件：

{
   "columns": [
    "A",
    "B",
    "C"
   ],
   "rows": [
   { "1": "abc",
     "2": "def",
   },
   { "1": "ghi",
     "2": "jkl"
   }
  ]
 }

和如下所示的html文件：

<select class="form-control formSelect" name="{{form_select}}" multiple="multiple" required>
<option>A</option>
<option>B</option>
<option>C</option>
</select>

我如何获得“ 1”的值？以及如何使用值作为选择选项填充html选择组？

我尝试记录json文件的内容，但未记录。这是我的代码：

function addSiteOptions()
{
var contents = fs.readFileSync("api_response_sample", 'utf8');
var jsonArray = JSON.parse(contents);
var options = [];
for(var x = 0; x < 2; x++)
{
   for(var i = 0; i < jsonArray.length; i++)
   {
       options.push(jsonArray[1].rows.Site);
   }
}

return console.log("OPTIONS ARE" + options);

}

Answer 1

首先，您的json无效。 "2": "def",逗号不应该在那儿。

{
    "columns": [ "A", "B", "C"],
    "rows": [
        { "1": "abc", "2": "def" },
        { "1": "ghi", "2": "jkl" }
    ]
}

在那之后，这非常简单。加载json文件在您的应用程序中，对其进行解析并提取所需的属性（在您的情况下为1）。

这是应用程序代码的最小示例。

const express = require('express');
const fs = require('fs');

const app = express();

app.set('view engine', 'hbs');

app.get('/', (req, res) => {
  // parse json file
  const data = JSON.parse(fs.readFileSync('data.json', 'utf8'));
  // extract desired properties
  const options = data.rows.reduce((acc, obj) => acc.concat(obj['1']), []);

  // send extracted options to your view
  res.render('index', { options });
});

app.listen(3000);

然后在您的视图文件（index.hbs）中，迭代获得的options数组以创建<option>元素。

<select>
  {{#each options }}
    <option>{{ this }}</option>
  {{/each }}
</select>

注意：此答案中使用hbs，因为原始问题是关于此的。

使用外部json填充html选择组

1 个答案: