Javascript 用json数据填充select元素并返回json的过滤内容

Javascript 用json数据填充select元素并返回json的过滤内容,javascript,json,Javascript,Json,我只想显示我用过的.json的一部分。 scrapy输出类似于此,大约有500个条目: data.json [ { "Content":["<h2>Heading of Paragraph1</h2><p>the actual pargraph1</p>"], "Titel": ["Heading of Paragraph1"] } , { "Content": ["<h2>Heading of Paragraph2</h2&

我只想显示我用过的.json的一部分。 scrapy输出类似于此,大约有500个条目:

data.json

[
{
"Content":["<h2>Heading of Paragraph1</h2><p>the actual pargraph1</p>"], 
"Titel": ["Heading of Paragraph1"]
}
,

{
"Content": ["<h2>Heading of Paragraph2</h2><p>the actual pargraph2</p>"], 
"Titel": ["Heading of Paragraph2"]
}
,
{
"Content": ["<h2>Heading of Paragraph3</h2><p>the actual pargraph3</p>"], 
"Titel": ["Heading of Paragraph3"]
}
]
我想做的是生成一个包含所有Titel元素的列表,供用户选择。然后,网站应该显示选定的段落。 我发现一些javascript可能是一个不错的选择。我计划稍后使用,以使UI可用

到目前为止,我提出了这个html

index.html

    <body>
  <form action="/returnselected_paragraphs.js">
    <select name="pargraphs" multiple>
      <option value="Heading of Pargraph1">Heading of Paragraph1</option>
      <option value="Heading of Pargraph2">Heading of Paragraph2</option>
      <option value="Heading of Pargraph3">Heading of Paragraph3</option>
      <!-- this should be genereated by javascript with data from the json --!>
<input type="submit">
</form>

<h1>output</h1>
<h2>Heading of Paragraph1</h2><p>the actual pargraph1</p>
<h2>Heading of Paragraph2</h2><p>the actual pargraph2</p>
<!-- this should be genereated by javascript with data from json--!>
我的问题是javascript。 我发现这似乎与我想要的相似,但数据的格式不同。我不知道如何使它适应我的数据

我把我的想法放在这里:

谢谢大家抽出时间,我希望我遵守了所有规则。

试试这个

迭代数组并创建select

选择应呈现内容时的绑定更改事件

演示

var arr=[{ 内容:[第1段的标题实际参数1

], Titel:[第1段标题] }, { 内容:[第2段标题实际参数2

], Titel:[第2段标题] }, { 内容:[第3段的标题实际参数3

], Titel:[第3段标题] } ]; //首先准备选项 var options=arr.map功能项{ return+item.Titel[0]+ }.加入; //将所有选项设置为选择,然后绑定更改事件 $select.html选项。更改函数{ $paraContent.html; var val=$this.val; $paraContent.html val.map函数标题{ 返回arr.find s=>s.Titel[0]==title.Content[0]; }.加入 //console.logval; };

试试这个

迭代数组并创建select

选择应呈现内容时的绑定更改事件

演示

var arr=[{ 内容:[第1段的标题实际参数1

], Titel:[第1段标题] }, { 内容:[第2段标题实际参数2

], Titel:[第2段标题] }, { 内容:[第3段的标题实际参数3

], Titel:[第3段标题] } ]; //首先准备选项 var options=arr.map功能项{ return+item.Titel[0]+ }.加入; //将所有选项设置为选择,然后绑定更改事件 $select.html选项。更改函数{ $paraContent.html; var val=$this.val; $paraContent.html val.map函数标题{ 返回arr.find s=>s.Titel[0]==title.Content[0]; }.加入 //console.logval; };


您可以轻松构建选项列表:

const options = json_data.reduce(
    function (fragment, item)
    {
        const option = document.createElement("option");
        option.value = item.Titel[0];
        option.textContent = option.value;
        fragment.appendChild(option);
        return fragment;
    },
    document.createDocumentFragment()
);

然后将选项附加到选择中,文档片段将与选择合并并消失,不用担心。

您可以轻松构建选项列表:

const options = json_data.reduce(
    function (fragment, item)
    {
        const option = document.createElement("option");
        option.value = item.Titel[0];
        option.textContent = option.value;
        fragment.appendChild(option);
        return fragment;
    },
    document.createDocumentFragment()
);

然后将选项附加到select中,文档片段将与select合并并消失,不用担心。

从您在JSFIDLE上的参考中,您可以将其修改为以下代码:

    var data = [
{
"Content":["<h2>Heading of Paragraph1</h2><p>the actual pargraph1</p>"], 
"Titel": ["Heading of Paragraph1"]
}
,

{
"Content": ["<h2>Heading of Paragraph2</h2><p>the actual pargraph2</p>"], 
"Titel": ["Heading of Paragraph2"]
}
,
{
          "Content": ["<h2>Heading of Paragraph3</h2><p>the actual 
           pargraph3</p>"], 
         "Titel": ["Heading of Paragraph3"]
       }
      ]

      $.each(data, function () {
       var $option = $('<option/>').text(this.Titel[0]).val(this.Titel[0]);
        $option.data("content",this.Content[0])
       $('#selectCompany').append($option);
       });

从您对JSFIDLE的引用中,您可以将其修改为以下代码:

    var data = [
{
"Content":["<h2>Heading of Paragraph1</h2><p>the actual pargraph1</p>"], 
"Titel": ["Heading of Paragraph1"]
}
,

{
"Content": ["<h2>Heading of Paragraph2</h2><p>the actual pargraph2</p>"], 
"Titel": ["Heading of Paragraph2"]
}
,
{
          "Content": ["<h2>Heading of Paragraph3</h2><p>the actual 
           pargraph3</p>"], 
         "Titel": ["Heading of Paragraph3"]
       }
      ]

      $.each(data, function () {
       var $option = $('<option/>').text(this.Titel[0]).val(this.Titel[0]);
        $option.data("content",this.Content[0])
       $('#selectCompany').append($option);
       });

非常感谢你!它可以在网站上运行,但是如果我将第一个框保存为returnselected_parations.js,将第二个框保存为index.html,保存到同一个目录,它不会做任何事情。无法将您的新问题与您在原始问题中描述的问题联系起来。你能帮我理解它们之间的关系吗?我只是在加载javascript时遇到了问题。刚刚添加到html中,非常感谢!它可以在网站上运行,但是如果我将第一个框保存为returnselected_parations.js,将第二个框保存为index.html,保存到同一个目录,它不会做任何事情。无法将您的新问题与您在原始问题中描述的问题联系起来。你能帮我理解它们之间的关系吗?我只是在加载javascript时遇到了问题。只是用一个