Hilfe mit einem Script

-Linix · 19. Oktober 2019

Hallo,

Ich habe folgendes Problem, dass auf dem Bild zusehen ist https://prnt.sc/plm4g1 .

Ich möchte, dass Heavy neben Calais - Duisburg (Road) steht.

Code:

Code

div class="card mb-5">
            <div class="card-header">
              <b>TruckersMP Stats</b>
            </div>
            <div class="card-body">
              <table class="table">
                <tbody>
                  <tr>
                  <h1></h1><p>Server: Simulation 1</p></tr>
                  <tr>
                    <td><div id="tes32"></div>
                    
                      <section></section>
                      <script>
                          function getThem(selHeader, selSection, url) {
                              function populateHeader(jsonObj) {
                                  var myH1 = document.createElement('h1');
                                  myH1.textContent = jsonObj['squadName'];
                                  header.appendChild(myH1);
                                  var myPara = document.createElement('p');
                                  myPara.textContent = '' + jsonObj.response[0].name 
                                  header.appendChild(myPara);
                              }
                              var header = document.querySelector(selHeader);
                              var section = document.querySelector(selSection);
                              var requestURL = url;
                              var request = new XMLHttpRequest();
                              request.open('GET', requestURL);
                              request.responseType = 'json';
                              request.send();
                              request.onload = function () {
                                  var superHeroes = request.response;
                                  populateHeader(superHeroes);
                                  // showHeroes(superHeroes);
                              }
                          }
                          getThem('#tes32', 'section', 'https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2')
                        
</script>

    </div>
    <tr><script src="test.js"></script></tr>
                          </div></td>






-------------------------- test.js

function getThem(selHeader, selSection, url) {
    function populateHeader(jsonObj) {
        var myH1 = document.createElement('h1');
        myH1.textContent = jsonObj['squadName'];
        header.appendChild(myH1);
        var myPara = document.createElement('p');
        myPara.textContent = '' + jsonObj.response[0].severity
        header.appendChild(myPara);
    }
    var header = document.querySelector(selHeader);
    var section = document.querySelector(selSection);
    var requestURL = url;
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    request.onload = function () {
        var superHeroes = request.response;
        populateHeader(superHeroes);
        // showHeroes(superHeroes);
    }
}
getThem('#tes32', 'section', 'https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2')

Alles anzeigen

basti1012 · 20. Oktober 2019

Du erstellst jedesmal ein Element.

Ein Element fängt normalerweise immer in einer neuer Zeile an.

Es gibt mehre möglichkeit das neben einandwer zu bekommen.

1. Zb alles in ein Element zu schreiben.

2. du erzeugst span Elemente

3.beide Elemente in einen Extra Container packen der Display Flex hat.

usw...

Du benutzt da ja auch Tabellen Elemente , dann erzeug doch td Elementer die von einen <tr> umgeben sind

-Linix · 20. Oktober 2019

Also mit Element hatt es nicht funktioniert und auch nicht

-Linix · 20. Oktober 2019

Können sie mir vllt ein code beispiel zeigen?

basti1012 · 20. Oktober 2019

Dein HTML ist etwas komisch, deswegen geht das mit dem span natürlich nicht so einfach. Wenn die nebeneinander gewesen wären, dann ja.

Dann baue dir doch eine Tabelle zusammen, die du da ja schon angefangen hast.

Zb so

https://basti1012.bplaced.net/…rdner=html-seminar&id=385

Die API ist jetzt egal, das geht ja nur um das Erzeugen von tr und td Elemente, damit man das nebeneinander kriegt.

Du könntest ja auch mal zeigen, was du genau vorhast, dann kann man das vielleicht auch anders regeln

-Linix · 20. Oktober 2019

Noch ein Problem wenn ich die Tabelle nochmals kopiere und zum 2 mal einfüge funktioniert die 2 nicht.

basti1012 · 20. Oktober 2019

dann zeig mal wie du das gemacht hast.

Zeigt die Console irgendwelche Fehler ?

Denk dran das IDS nur einmal verwendet werden dürfem

-Linix · 20. Oktober 2019

Da kommen zwar fehler aber die haben damit nichts zutun.

Code

<!-- Default Card Example -->
          <div class="card-deck-wrapper">
            <div class="card-deck">
            

          <div class="card mb-4">
            <div class="card-header">
              <b>TruckersMP Stats</b>
            </div>
            <div class="card-body">
              <table class="table">
               
                  <tr>
                    <th>Server: Simulation 1</th>
                  </tr>
                  <tbody>   
                </tbody>
    <script>
       function getThem(id,  url,a) {
                var request = new XMLHttpRequest();
                request.open('GET', url);
                request.responseType = 'json';
                request.send();
                request.onload = function () {
                var jsonObj = request.response;
                var  tbody = document.querySelector(id);
                var tr = document.createElement('tr');
                  
              
             arra=[jsonObj.response[a].name,jsonObj.response[a].severity,jsonObj.response[a].players];
            for(p=0;p<4;p++){  
                var  td = document.createElement('td');
                     td.textContent =arra[p];
                     tr.appendChild(td);
                }
  
                tbody.appendChild(tr);
                }
            }
      for(a=0;a<6;a++){
getThem('tbody', 'https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2',a);//https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2',a)              
      }    
</script>
              </table>
            </div>
          </div>


          <div class="card mb-4">
            <div class="card-header">
              <b>TruckersMP Stats</b>
            </div>
            <div class="card-body">
              <table class="table">
               
                  <tr>
                    <th>Server: Simulation 1</th>
                  </tr>
                  <tbody>   
                </tbody>
                <p>
    <script>
     
       function getThem(id,  url,a) {
                var request = new XMLHttpRequest();
                request.open('GET', url);
                request.responseType = 'json';
                request.send();
                request.onload = function () {
                var jsonObj = request.response;
                var  tbody = document.querySelector(id);
                var tr = document.createElement('tr');
                  
              
             arra=[jsonObj.response[a].name,jsonObj.response[a].severity,jsonObj.response[a].players];
            for(p=0;p<4;p++){  
                var  td = document.createElement('td');
                     td.textContent =arra[p];
                     tr.appendChild(td);
                }
  
                tbody.appendChild(tr);
                }
            }
      for(a=0;a<6;a++){
getThem('tbody', 'https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2',a);//https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2',a)              
      }    
</script>
              </table>
            </div>
          </div>
        </p>

Alles anzeigen

basti1012 · 20. Oktober 2019

Am einfachsten wäre es, wenn du mal die Links zu den APIs gibst und was du genau angezeigt bekommen willst und wie genau .

Du bindest das Script ja auch 2-mal ein und das brauch man auch nicht unbedingt.

* Link entfernt , weil existiert nicht mehr *

Mach doch mal eine Skizze fertig wie es aussehen soll und was du aus welcher API angezeigt bekommen willst.

Wie viele verschiedene API Links hast du den?

Hilfe mit einem Script

Jetzt mitmachen!

Teilen

Tags