Chcę wyświetlić tylko fragmenty pliku .json, z którego wykonałem skrobanie scrapy. wyniki scrapy wyglądają mniej więcej tak: ma około 500 wpisów:
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"]
}
]
Co chcę zrobić, to wygenerować listę wszystkichelementy "Titel" do wyboru przez użytkownika. Następnie strona powinna wyświetlać wybrane akapity. Doszedłem do wniosku, że niektóre javascript są prawdopodobnie drogą do zrobienia. Mam zamiar użyć wybrany później, aby UI był użyteczny.
Jak dotąd wymyśliłem ten 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--!>
Moim problemem jest javascript. znalazłem ten kod na jsfiddle co wydaje się podobne do tego, czego chcę, ale dane są inaczej sformułowane. Nie wiem, jak dostosować to do moich danych.
Przedstawiłem tutaj mój pomysł: https://jsfiddle.net/jtxzerpu/
Dziękuję wszystkim za poświęcony czas, mam nadzieję, że trzymałem się wszystkich zasad.
Odpowiedzi:
0 dla odpowiedzi № 1Spróbuj tego
Iteruj tablicę i twórz zaznaczenia
Binduj wydarzenie zmiany dotyczące wyboru, która zawartość ma być renderowana.
Próbny
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>0 dla odpowiedzi nr 2
Możesz łatwo zbudować listę opcji:
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()
);
Następnie dodaj opcje do swojego wyboru (fragment dokumentu "scali się" z zaznaczeniem i zniknie, nie martw się).
0 dla odpowiedzi № 3
Od twojego odniesienia na jsfiddle, możesz zmienić to do kodu poniżej:
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);
});
Oto link do zmodyfikowanego kodu w akcji: https://jsfiddle.net/azqxhjgx/
Możesz użyć zdarzenia click w opcji, aby wyświetlić zawartość obiektu, gdzie chcesz, coś w tym stylu:
$("#selected > option").click(function(){
// do whatever with $this.data("content")
})