Using Javascript to make buttons that make new Javascript

Question

I am using Javascript to bring in a json list of races that have been completed from an external URL. There could be 1 race completed or a hundred. You click the button and it populates the list. Once this is done, I need to be able to click one of the race buttons and have it pull in another json list from an external URL and shows the list of runners and their times.

My issue is how to use Javascript to make any of the possibly 1 to 100 buttons clickable to bring in the data from an external website. If I click the first button, it would bring in data from website.com/1. If I click the second, it brings the data from website.com/2, and so on.

Here is the code I have so far:

$("#getList").unbind("click").click(function() {
    $.getJSON("myURL.com/races/", dataFunc);

    function dataFunc(data) {
        $jsonData = data;
        displayRaces($jsonData.races.length, $jsonData)
    }
});

function displayRaces(length, json) {
    console.log("inside display races function");
    i = 0;
    while (i < length) {
        $race = json.races[i].race_name;
        var mydiv = document.getElementById("getResults");
        var aTag = document.createElement('BUTTON');
        var linkURL = "#" + i;
        aTag.setAttribute('id', linkURL);
        aTag.setAttribute('href', linkURL);
        aTag.innerHTML = $race;
        mydiv.appendChild(aTag);
        i++;
    }
}

This works to make a list of the buttons for the races. Now I need to figure out how to make it so when I click the button, it can essentially run a similar code to display the runners. I was thinking of somehow making it so that there is a variable in

$("#variable").unbind("click").click(function() {}

line so that you can say "If I click the button #1, get the json data from myurl.com/data/1 and display it"

You can put a data attribute on the buttons and put the # that should be in the url in that field. Then in the event handler for the element, you can get that data element value off the event.target or this. developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… — Taplar
– Taplar, Commented Dec 1, 2017 at 21:45

vbranden · Accepted Answer · 2017-12-01 22:23:31Z

You can just make separate functions for each and bind them to the object which you can dynamically create with jQuery. Here is an example. you would replace the array lookups with ajax calls to the api

const raceData = [
  { id: 1, name: 'Race1', data: {} },
  { id: 2, name: 'Race2', data: {} }
]

function loadRaceData(url, targetId) {
  const data = raceData
    .filter(data => data.id === url)
  $(`#${targetId}`)
    .html(JSON.stringify(data[0], null, '  '))
}

function loadRaces() {
  $('#racelist').empty()
  $.each(raceData, (index, value) => {
    const raceDataId = `racedata-${value.id}`
    $('#racelist').append(
      $('<div>')
        .append(
          $('<button class="btn btn-primary">')
            .click(() => {
              loadRaceData(value.id, raceDataId)
            })
            .html(`Load ${value.name}`)
        )
        .append(
          $('<pre>')
            .attr('id', raceDataId)
        )
    )
  })
}

$('#loadRace')
  .click(() => {
    loadRaces()
  })

.raceData {
  min-height: 10px;
  background-color: lightgrey;
}

button {
  margin-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="container">
  <h3>Races</h3>
  <button type=button class="btn btn-default" id="loadRace">Load Races</button>
  <div id="racelist">
  </div>
</div>

Collectives™ on Stack Overflow

Using Javascript to make buttons that make new Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related