How to dynamically create buttons with multiple attributes each(Title, description, and linked) at the same time? [Solved]

1

I am working on the wikipedia searcher project, and I am currently able to get the title of each article, each link, and a short description of the article. The thing I would like to do now is create a function that can dynamically create as many buttons as there are results while putting a title and description inside the button, and I would like to make each button linked to the wikipedia article it refers to. Up until this point, I have made a button with these attributes manually in html, and now that I know my api code works, I would like to clean it up and generate the buttons with their attributes as I need them. Here is the code I’m working with:

var arrayLength = results.length;
for (var i = 0; i < arrayLength; i++) {
console.log((results[i]));
//Do something

  $("#a"+i).html(' href=https://www.wikipedia.org/en/' + results[i].title);
  $("#title"+i).html(results[i].title);
  
  $("#p"+i).html(results[i].snippet);

}

Here is the HTML:
http://pastebin.com/VWvjCr5s

Any specific examples on how to best accomplish this would be greatly appreciated!
Thanks!

2

I really can’t recommend your approach as you’re handling it now (loops and generated ids). This is the sort of thing that template engines like Handlebars and Dust were made for. jQuery, not so much, but if you want one that works well with jQuery, there’s JsRender.

The push these days is away from template engines and toward full-blown view layers like React and Angular, but it’s probably good to know a couple of the old-fashioned template libraries even now.

Oh, and HTML5 has a template mechanism of a sort built-in with <template> but frankly it’s weird, cumbersome, and like everything else to do with the DOM, ungodly slow.

3

Look into the jQuery .add() and .appendTo() methods.

I can’t go into more detail right now, but these were the methods I used to dynamically write as many new divs as I needed based on search results.

4

Thanks for the reply! I’ll look into those. Could you message me with more details later if you have time? If not, thats fine.
Thanks again!

6

It’ll likely be tomorrow morning (Aussie time), got some family stuff on today :slight_smile:

7

That works. Thanks very much !

8

Ok, without giving too much away, here is a very simple implementation that lists all the titles of Wikipedia articles:

$.getJSON(url, function(data) {
    $.each(data.query.search, function (i, item) {
      $(".results").add('<div>' + item.title + '</div>').appendTo(".results");
    });
  });

Explanation

  1. getJSON takes a url (the Wikipedia API string) and a callback function which takes the JSON response.

  2. The callback here takes the JSON response, called ‘data’ in my example and uses the jQuery .each() method to iterate over every object in the response. The each method also takes a callback, which is a function that describes what should be done with each object.

  3. The each callback takes the whole object, called ‘item’ (‘i’ is an unused counter/index), and creates a new HTML element with the .add() method, and then appends that newly constructed bit of HTML to our target div.

In your example you’ll need to construct a more complicated HTML string, since you wanna make buttons with links and text, etc.

Also, Wikipedia has lots of possible JSON response objects, so the structure of your object may be a little different and the data.query.search bit may look a little different.

9

Thanks for the help! Your example was very helpful !