Javascript jak wyświetlić, wszystkie elementy z obiektu JSON

Question

Witam serdecznie, mam taki problemik, a mianowicie, pobieram dane z zewnętrznego pliku JSON, i chcę wyświetlić całą zawartość jego treści, o ile z pobraniem danych nie mam problemu, to z wyświetleniem tego już tak, koniecznie zależy mi, na tym, aby to było wyświetlane poprzez document.getElementById.

Tak używam pętli for, do ustalenia ilości pozycji, i length, ale gdy używam tej metody, to pokazuje mi tylko ostatni element, z pozycji, a gdy użyłem, aż wstyd się przyznać, document.,write, zadziałało i pokazało mi wszystkie pozycje, ale przeładowuje mi stronę :-( a nie o to mi chodzi, dodam iż nie używam Jquery.

Dodaje fragment kodu:

for(var x=0; x<= create_obj_js.users.length; x++){
    document.getElementById("view").innerHTML= create_obj_js.users[x].name;
}

A tu jest JSON:

{"users":
[
	{"name":"Daniel"},
	{"name":"Iza"},
	{"name":"Ewa"}
]
}

 

Comments

Dziękuje za tak liczny odzew, ale chyba popełniłem błąd, nie podając szerszego kontekstu, ale popróbuje wszystkie propozycje, podaje cały skrypt JS.

	// Javascript

function myfunction(){

	var xhttp;

		if (window.XMLHttpRequest) {
    		xhttp = new XMLHttpRequest();
    	} else {
    		// code for IE6, IE5create_obj_js.users
    	xhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		

		xhttp.onreadystatechange = function(){
			if(xhttp.readyState == 4 && xhttp.status == 200){

				var requestjson = xhttp.responseText;
				var create_obj_js = JSON.parse(requestjson); // <- Create object JS.

				for(var x=0; x<= create_obj_js.users.length; x++){
					document.getElementById("view").innerHTML= create_obj_js.users[x].name;
				}

			}
			
		}

	xhttp.open("GET", "data.json", true);
	xhttp.send();

}

A co do let, to tak wiem, że teraz powinno się jej używać, zamiast var, ale słyszałem że coś Android jej nie lubi.

A ten projekt, który sobie robię, ma być to taki manager zadań, wpisujemy co mamy zrobić, a potem będziemy sobie odznaczać, a przynajmniej taka jest teoria, ale jak widzicie no jeszcze daleko mi, do takiej funkcjonalności, w wypadku awaryjnym, zrobię to na MySql, którego bardziej ogarniam i php.

Answer 1

Spróbuj tak:

let users = [
    {"name":"Daniel"},
    {"name":"Iza"},
    {"name":"Ewa"}];
users.filter((user)=>{
 document.getElementById("view").innerHTML=   document.getElementById("view").innerHTML + "<br/>"+ user.name;
});

<div id="view">
</div>

link do codepen: https://codepen.io/anon/pen/rvrMqE

 

Comments

A jaki sens ma tu metoda filter, która de facto zwróci Ci pustą tablicę, ponieważ z callback robisz return undefined co przekonwertuje się do false?

---

@Igor Gawrys,  Ta propozycja, wygląda na obiecującą, wyświetla wszystko super, tylko że ja mam dane w zewnętrznym JSON, i  przycisk w html-u który odpala tą całą funkcje, zamiast podmienić zawartość div-a view, dodaje mi ciągle dane, i tak mogę nim spamować, :-) po kliknięciu w przycisk, ale chyba jesteśmy na dobrym tropie.

---

Poprawione codepen: https://codepen.io/anon/pen/rvrMqE 

Answer 2

ta linijka z getElementById to według mnie coś takiego

var tmp = '';
for(var x = 0; x <= 10; x++) {
    tmp = x;
}

widzisz teraz co masz źle :) ?

var names = '';
for(var x = 0; x <= create_obj_js.users.length; x++) {
    names += create_obj_js.users[x].name + ', ';
}
//tutaj sobie usuń ostatni przecinek
document.getElementById('view').innerHTML = names;

sprawdź czy literówki po drodze nie strzeliłem

Answer 3

Użyj += do zmiany html ponieważ tak nadpisuje Ci kolejno, aż do ostatniego a Ty musisz je połaczyć.

Comments

Fakt, faktem działa, ale zamiast zastępować div-a, dodaje dane, a dodatkowo mam przycisk, od wywoływania tej funkcji, przy pomocy którego, można spamować tymi danymi.

Answer 4

Ja proponuję podejść do problemu inaczej. Najpierw obrób sobie dane pozyskane z zewnątrz i stwórz np. tablicę zawierającą imiona:

//Tutaj mamy nasz obiekt pozyskany z zewnątrz:
const obj = {"users":
[
    {"name":"Daniel"},
    {"name":"Iza"},
    {"name":"Ewa"}
]
};

//Tutaj tworzymy stałą names zawierającą tylko imiona:
const names = obj.users.map(({name}) => name);

I teraz w miejscu, gdzie chcesz je wyświetlić robisz po prostu:

document.getElementById('view').textContent = names.join(', ');

W ten sposób masz rozdzielone miejsce trzymania wejściowych danych, ich obróbki i wyświetlania. Za chwilę może zdarzyć się, że jakiś inny komponent na stronie będzie potrzebował np. imion posortowanych jakoś, albo tylko pierwszych trzech itp. to ponownie użyjesz naszej tablicy "names" bez konieczności ponownego iterowania pętlą for.

Dodatkowo korzystając z tablicy i metody Array.prototype.join nie masz problemu z usuwaniem końcowego przecinka (można by to łatwo machnąć regexp ale byłoby to mało uniwersalne). W ten sposób za chwilę możesz imiona wyświetlać w dowolny inny sposób - wystarczy zmienić parametr metody join() i voila, reszta kodu zostaje bez zmian.

Comments

Dziękuję, za wszystkie propozycje odpowiedzi, ale niestety jakoś m, nie idzie efektywne wdrażanie, tej technologii, w projekcie, znacznie bardziej efektywniejsze, dla mnie okazało się być,PHP i MySql, które to o wiele lepiej znam.