Eroare la incarcare json

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
Avatar utilizator
ddorel
Mesaje: 16

Eroare la incarcare json

Bună Marius
Cum rezolv să imi încarce tot fișierul .json
eoroare la

Cod: Selectaţi tot

//fetch(endpoint)
//.then(blob => blob.json())
//.then(data => cities.push(...data));

fisierul url json este mare, am pus un fisier json mai mic cu acceasi structura si merge

Cod: Selectaţi tot

<!doctype html>
<html lang="en">
<head></head>
<body>
  <div class="search-form">
    <input type="text" class="search" placeholder="Oraș sau județ">
    <ul class="suggestions">
    </ul>
  </div>

<script>
const endpoint ='raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/cities.json';

const cities = [];
fetch(endpoint)
	.then(blob => blob.json())
	.then(data => cities.push(...data));	
function findMatches(wordToMatch, cities) {
	return cities.filter(place => {
		const regex = new RegExp(wordToMatch, 'gi');
		return place.name.match(regex) || place.state_name.match(regex);
	});
}
function displayMatches() {
	const matchArray = findMatches(this.value, cities).slice(0, 5);
	const html = matchArray.map(place => {
		const regex = new RegExp(this.value, 'gi');
		const cityName = place.name.replace(regex, `<span class="hl">${this.value}</span>`);
		const stateName = place.state_name.replace(regex, `<span class="hl">${this.value}</span>`);
		return `<li>
				<span class="name">${cityName}, ${place.state_name}</span>
			</li>`;
	}).join('');
	suggestions.innerHTML = html;
}

const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);

</script>  
</body>
</html>
MarPlo Mesaje: 4343
Salut,
Daca acelasi script merge cu fisierul json pe care l-ai pus; problema ar putea fi o eroare de sintaxa in fisierul json care nu functioneaza, sau marimea prea mare a acelui fisier. Dar nu stiu care ar fi rezolvarea in caz ca fisierul e foarte mare.
Vezi poate gasesti ceva pe internet la cautare:
javascript load and parse big large file
ddorel Mesaje: 16
asta ii fisierul

Cod: Selectaţi tot

const endpoint ='raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/cities.json';
are 1959232 linii
MarPlo Mesaje: 4343
Fisierul json de la acea adresa are peste 50 MB, e cam mare pentru preluare si procesare direct in pagina (client side) cu javascript.

A) Indicat ar fi sa citesti si sa prelucrezi acel fisier pe server, cu php sau nodejs (ca o baza de date in json); iar cu javascript (cu ajax) preiei de pe server doar ce vrei sa afisezi in pagina.

B) O alta modalitate (dar ne indicata) daca vrei doar client side, ar fi sa arhivezi fisierul json in format ZIP (asa ar avea cam 4 MB), sa incarci in pagina fisierul ZIP, apoi cu o librarie de functii javascript (de exemplu zip.js) dezarhivezi fisierul si il transformi inapoi in obiect json.
Gasesti pe internet informatii si cazuri similare la cautare:
javascript unpack zip file

Oricum, avand in vedere marimea codului json, chiar si cu aceasta modalitate scriptul var rula greu in pagina.
Cel mai indicat e procesarea pe server si preluarea in pagina, cu ajax, doar a detelor care trebuie afisate (e mai performant si rapid).

Subiecte similare