jsonデータでselect要素を設定し、jsonのフィルタ処理されたコンテンツを返す

scrapyで削った.jsonの部分だけを表示したいとします。 scrapy出力は次のようになりますし、約500のエントリがあります。私は何をしたいかjsonデータでselect要素を設定し、jsonのフィルタ処理されたコンテンツを返す

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を使用可能にするには、後でchosenを使用する予定です。

は、これまでのところ、私は私の問題ではJavaScriptでこの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--!>

を思い付きました。私はthis code on jsfiddleが欲しいものと似ていると感じましたが、データの形式が異なっています。私はそれを自分のデータにどのように適応させるかわかりません。

私はここに私の考えを置く：https://jsfiddle.net/jtxzerpu/

は、私はすべてのルールに固執なかった願って、お時間ありがとうございました。

出典

2017-11-10 Nivatius

この

反復に配列を試してみて、コンテンツがレンダリングされるべきで選択のselect
バインド変更イベントを作成します。

デモ

var arr = [{ 
 
    "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"] 
 
    } 
 
]; 
 

 
//prepare the options first 
 
var options = arr.map(function(item){ 
 
    return "<option value='" + item.Titel[0] + "'>"+ item.Titel[0] + "</option>" 
 
}).join(""); 
 

 
//set all the options to select and then bind change event 
 
$("select").html(options).change(function(){ 
 
    $("#paraContent").html(""); 
 
    var val = $(this).val(); 
 
    $("#paraContent").html(val.map(function(title){ 
 
     return arr.find((s) => s.Titel[0] == title).Content[0]; 
 
    }).join("</br>")) 
 
    //console.log(val); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="/returnselected_paragraphs.js"> 
 
    <select name="pargraphs" multiple> 
 
    </select> 
 
    <p id="paraContent"> 
 
     
 
    </p> 
 
    <input type="submit"> 
 
    </form>

出典

2017-11-10 14:40:33 gurvinder372

ありがとう！ここではサイト上で動作しますが、フリーリストボックスをreturnselected_paragraphs.jsとして保存し、2番目のリストを同じディレクトリにindex.htmlとして保存すると、何もしません。 – Nivatius

説明した問題と新しい問題を関連付けることができませんあなたのオリジナルの質問に彼らがどのように関係しているのか理解できますか？ – gurvinder372

私はちょうどJavaScriptを読み込む際に問題がありました。 – Nivatius

あなたは簡単にオプションのリストを構築することができます。

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() 
);

は、その後、あなたの選択（ドキュメントフラグメントにオプションを追加します"マージ"ウィット選択して消える、心配しないでください）。

出典

2017-11-10 14:40:58 Kulvar

jsfiddleの参照から、あなたは以下のコードにそれを変更することができます。ここでは

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); 
     });

アクションで変更したコードへのリンクです：あなたはオプションをクリックしてイベントを使用することができますhttps://jsfiddle.net/azqxhjgx/

オブジェクトのコンテンツを表示するには、次のようなものを入力します。

$("#selected > option").click(function(){ 
    // do whatever with $this.data("content") 
})

出典

2017-11-10 14:52:46

私はフィドルを更新しました。ここにあります： https://jsfiddle.net/3p40L3m1/ –

jsonデータでselect要素を設定し、jsonのフィルタ処理されたコンテンツを返す

答えて

関連する問題