Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

JSON till HTML div, vad gör jag för fel????

1
Skriv svar
Permalänk
Medlem
●

JSON till HTML div, vad gör jag för fel????

OBS! Är ny inom javascript så kasta mig inte i brunnen tack!

err jag får:
main.js:13 Uncaught (in promise) TypeError: users.forEach is not a function
at renderUsers (main.js:13:11)

// koden

  1. async function kontaktInfo() {

  2. let url = 'https://raw.githubusercontent.com/HackersOfSweden/WelcomeToSw...';

  3. try {

  4. let res = await fetch(url);

  5. return await res.json();

  6. } catch (error) {

  7. console.log(error);

  8. }

  9. }

  10. async function renderUsers() {

  11. let users = await kontaktInfo();

  12. let html = '';

  13. users.forEach(user => {

  14. let htmlSegment = `<div class="Region">

  15. <h2>${Ort}</h2>

  16. <div class="email"><a href="email:${user.E-post}">${user.E-post}</a></div>

  17. <div class="telnr"><a href="${user.Telefon}">${user.Telefon}</a></div>

  18. <div class="webb"><a href="${user.Webbadress}">${user.Webbadress}</a></div>

  19. </div>`;

  21. html += htmlSegment;

  22. });

  24. let container = document.querySelector('.container');

  25. container.innerHTML = html;

  26. }

  28. renderUsers();

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Använd gärna code taggarna när du skriver ut kod.
https://en.scratch-wiki.info/wiki/BBCode#Code

txt = "Hello World"
print(txt)
Visa signatur

AMD 7800X3D | ASUS TUF X670E-PLUS | Corsair Vengeance DDR5 32GB EXPO | ASUS TUF 4090 OC 24GB |
Noctua NH-U12A | Corsair 4000D | Corsair AX1200W | Steelseries Apex 7 | Steelseries Sensei Ten | ASUS VG35VQ
https://github.com/Mariusz89B

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag antar att res är en array då du vill köra forEach på den. Men du tar .json() och då blir det en sträng och därav fungerar inte forEach. Är det en sträng kan du köra JSON.parse(res), annars behålla den som den är.

Så det är denna raden kod som kan strula för dig.
let users = await kontaktInfo(); <- retunerar en sträng

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Maddoxswe:

Jag antar att res är en array då du vill köra forEach på den. Men du tar .json() och då blir det en sträng och därav fungerar inte forEach. Är det en sträng kan du köra JSON.parse(res), annars behålla den som den är.

Så det är denna raden kod som kan strula för dig.
let users = await kontaktInfo(); <- retunerar en sträng

Gå till inlägget

har löst problemet.. men nu när jag inte har några err så får jag den inte att skapa div:ar i min div.container som jag vill med koden

Ursäkta om de blir jobbigt, men är rätt novis inom detta! och vill lära mig!

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Ja det finns väldigt många människor som har svårt att förstå man kan vara nybörjare någon gång

Vi kan försöka lösa det. Det första som slog mig vad som kan vara fel med att html inte genereras är om denna raden kod hittar något

let container = document.querySelector('.container');

kan du kolla genom att t.ex. console.log("container", cointainer); vad du får där ?

Då du inte visar din html så vet jag inte vad du har för div:ar där.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Maddoxswe:

Ja det finns väldigt många människor som har svårt att förstå man kan vara nybörjare någon gång

Vi kan försöka lösa det. Det första som slog mig vad som kan vara fel med att html inte genereras är om denna raden kod hittar något

let container = document.querySelector('.container');

kan du kolla genom att t.ex. console.log("container", cointainer); vad du får där ?

Då du inte visar din html så vet jag inte vad du har för div:ar där.

Gå till inlägget

fick inget i konsolen, testade även getElementByClassName ist för querySelector

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Powerjimmy:

fick inget i konsolen, testade även getElementByClassName ist för querySelector

Gå till inlägget

Kan du visa din html ?

Det du försöker göra är att hämta en div i din html och lägga på saker där. Men det verkar som din querySelector inte hittar någon div med klassen container. Det är det den punkten framför container säger, att det ska vara en klass.

<div class="container"></div> <- den hade du hittat med query selectorn

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

1. Posta den uppdaterade koden + använd code taggar eller ännu hellre en sida som codepen så att du även kan få med HTMLen.
2. Dina två instanser av

user.E-post

behöver vara

user['E-post']

då - inte är ett tecken som ingår i identifiers och parsas därför som

user.E - post
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Pie-or-paj:

1. Posta den uppdaterade koden + använd code taggar eller ännu hellre en sida som codepen så att du även kan få med HTMLen.
2. Dina två instanser av

user.E-post

behöver vara

user['E-post']

då - inte är ett tecken som ingår i identifiers och paras därför som

user.E - post
Gå till inlägget

Good find !

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Maddoxswe:

Kan du visa din html ?

Det du försöker göra är att hämta en div i din html och lägga på saker där. Men det verkar som din querySelector inte hittar någon div med klassen container. Det är det den punkten framför container säger, att det ska vara en klass.

<div class="container"></div> <- den hade du hittat med query selectorn

Gå till inlägget

CodePen

Sen ska jag göra en addeventlistner med onclick för de jag fetchar på button: kontakta

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Powerjimmy:

fick inget i konsolen, testade även getElementByClassName ist för querySelector

Gå till inlägget

Din kod fungerar inte och bör ge dig felmeddelanden. Så att du inte fick något i konsolen köper jag inte riktigt (testade själv i konsollen och fick ett flertal felmeddelanden )

Kontrollera noggrant hur JSON-data:t du hämtar ser ut:

Regions: {
        "Lanskod": "",
        "NameSV": "",
        "NameUA": "",
        "NameRU": "",
        "NameEn": "",
        "E-post": "",
        "Telefon": "",
        "Webbadress": "",
        "Postaddress 1": "",
        "Postnr": "",
        "Ort": ""
    },
   ...
}

Du måste alltså hämta ut nyckeln Regions innan du kan iterera över arrayen.
t.ex. users.Region.forEach(region => { ... });
Kontrollera även vilka nycklar som en region innehåller (nycklar med bindestreck, mellanslang o.s.v., måste anropas likt ett index i en array - t.ex. ['nyckelns namn'])

Annars fungerar det bra att köra, men se till så du hämtar rätt data från ditt objekt i forEach-loopen

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
 AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB
LG C2 42" 4K@120Hz AOC Q27G2U 1440P@144Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●

inga felmeddelanden eller konsol

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Powerjimmy:

inga felmeddelanden eller konsol

https://i.imgur.com/rjKbhTw.png

Gå till inlägget

Enligt din CodePen anropar du bara kontaktInfo(); och inte renderUsers(); . Därför får du inte heller någon utskrift, eftersom du endast kör fetch-anropet I din ursprunliga kod anropade du renderUsers();.

Vilken kod är det som används?

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
 AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB
LG C2 42" 4K@120Hz AOC Q27G2U 1440P@144Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Pamudas:

Enligt din CodePen anropar du bara kontaktInfo(); och inte renderUsers(); . Därför får du inte heller någon utskrift, eftersom du endast kör fetch-anropet I din ursprunliga kod anropade du renderUsers();.

Vilken kod är det som används?

Gå till inlägget

ah såg de nu, så nu får jag med felmeddelanden igen, de ska vara fuctionen renderUsers()

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Powerjimmy:

ah såg de nu, så nu får jag med felmeddelanden igen, de ska vara fuctionen renderUsers()

Gå till inlägget

Perfekt! Då borde du snart ha åtgärdat det som behövs

Provade förövrigt att köra koden här på Sweclockers och lyckades byta ut headern då den tydligen använder klassen container Så om du itererar över Regions (och fixar till E-post nyckeln) ska det fungera

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
 AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB
LG C2 42" 4K@120Hz AOC Q27G2U 1440P@144Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●

De funkar tack som fan! nu har jag 4 större med komplexa json objekt och lite addeventlistners kvar xD

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem
●
const element = document.getElementById("regioner");
element.addEventListener("click", Regioner);

function Regioner() {
document.querySelector('.container').innerHTML = html;

Cannot read properties of null (reading 'addEventListener')

Tänker jag helt fel med min Listener?

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Powerjimmy: 
const element = document.getElementById("regioner");
element.addEventListener("click", Regioner);

function Regioner() {
document.querySelector('.container').innerHTML = html;

Cannot read properties of null (reading 'addEventListener')

Tänker jag helt fel med min Listener?

Gå till inlägget

Har du något element med ID:t "regioner"? Du försöker försmodligen anropa funktionen addEventListener till element som är null.

Försök sök på ditt felmeddelande så får du fram mer info

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
 AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB
LG C2 42" 4K@120Hz AOC Q27G2U 1440P@144Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●

@Pamudas ja min knapp som ska aktivera function har id regioner

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Powerjimmy:

@Pamudas ja min knapp som ska aktivera function har id regioner

Gå till inlägget

Vart lägger du in ditt skript i HTML-dokumentet?

Eftersom HTML läses in uppifrån och ner, så måste dina element finnas innan du kan lägga till eventlyssnare på dessa. Om du, vilket jag då antar du har, <script>-taggarna i <head> på ditt dokument (d.v.s innan <body>) så kommer koden exekveras innan dina HTML-element har skapats.

Lägg in dina <script>-taggar längst ner <body> istället, så dessa exekveras efter dina element har skapats

(Om du använder jQuery-biblioteket så kan du använda dig av $(document).ready()-funktionen för att se till så koden exekveras efter ditt dokument laddat klart )

$(document).ready(function() {
...
});
Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
 AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB
LG C2 42" 4K@120Hz AOC Q27G2U 1440P@144Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●

@Pamudas ja de vet jag och har js script längst ner i body under allt annat, sen bootstrap m.fl i head

Citat:

(Om du använder jQuery-biblioteket så kan du använda dig av $(document).ready()-funktionen för att se till så koden exekveras efter ditt dokument laddat klart )

har kikat lite på de med, som sagt är rätt novis men försöker och läsa så mkt jag kan och öva!
Är inne i min 10e vecka i min utb inom frontEnd - Javascript men vi började med javascript lite mer seriöst för typ 3v sedan..

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Powerjimmy:

@Pamudas ja de vet jag och har js script längst ner i body under allt annat, sen bootstrap m.fl i head

Gå till inlägget

Okej, då är det något annat som är knas.
Men som med alla andra frågor kring kod.. klistra in/visa din kod som du faktiskt har nu så vi slipper gissa hur du har gjort det. Om du nu har skripten sist i body och även ett element med ID:t "regioner" så borde du inte få null när du försöker hämta ut detta element.

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
 AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB
LG C2 42" 4K@120Hz AOC Q27G2U 1440P@144Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ändrade denna koden som skickar infon om json direkt in i div.container

let container = document.querySelector('.container');
container.innerHTML = html;

till ->

const element = document.getElementById("regioner");
element.addEventListener("click", Regioner);

function Regioner() {
document.querySelector('.container').innerHTML = html;

för att den istället ska skicka koden till div.container när man trycker på:

<a class="nav-link active" aria-current="page"><button type="button" class="btn btn-primary" id="regioner">Regioner</button></a>


ska ta bort "<a class="nav-link active" aria-current="page"></a>" men slipar de sen, javascriptet är de som är svårt för mig..

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
Skrivet av Powerjimmy: 
const element = document.getElementById("regioner");
element.addEventListener("click", Regioner);

function Regioner() {
document.querySelector('.container').innerHTML = html;

Cannot read properties of null (reading 'addEventListener')

Tänker jag helt fel med min Listener?

Gå till inlägget

Det absolut viktigaste är att du lär dig felsöka kod själv. Baserat på frågorna du ställer skulle du i större utsträckning behöva tillämpa vanlig hederlig halloj debugging: tillfällig loggning på väl och/eller slumpvis utvalda ställen i koden så att du kan se vad som faktiskt händer. Även professionella programmerare löser dagligen såväl uppenbara facepalm-misstag som flugsvampslömska corner cases på det sättet. Exempel:

 const element = document.getElementById("regioner");
+console.warn("HALLOJ");
+console.warn(element);
 element.addEventListener("click", Regioner);
+console.warn("HALLOJ IGEN");

 function Regioner() {
-document.querySelector('.container').innerHTML = html;
+  const container = document.querySelector('.container');
+  console.warn("HALLOJ i Regioner");
+  console.warn(container);
+  container.innerHTML = html;

Självklart ska du inte låta debugloggning ligga kvar i koden när du löst problemet; det är bara ett hjälpmedel under utveckling. Git är ett lysande verktyg som, rätt använt, bland annat skyddar mot att råka glömma kvar skräp i sin kod – för att inte tala om alla random ändringar man råkat göra när man trodde att man skrev i ett annat fönster eller whatever.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●

@Alling tack så mkt för din input och feed!

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Du kan lägga script-taggen i head och lägga till attributet "defer".
Brukar nog anses lite bättre practice.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Har löst de mesta men ska bara lösa listener på byns som ska skicka olika jsons filer till samma element fast ska bara visa de json jag som är till en viss button.

Json > btn
Json > btn
Json > btn } div.container
Json > btn
Json > btn

Visa signatur

-"Robots are the future".

Marknadsreferenser:
https://www.sweclockers.com/forum/trad/1079311/sok?searchid=f...

Redigera
Citera flera Citera
1
Skriv svar