Post on recent experience


#1

I wrote a post dealing w/my most recent work (bang head on keyboard) experience getting the api. As I see it, it should:
1. force me to improve and work harder.
2. Leave code where i might find when in need it.
3. hopefully help someone as long as it works.

Since I realize I am not tops in js. Can i have some feed back on how to improve this post?

http://agileart.us/bring-in-some-free-apis/


#2

Hi,

Ok, let me give some general tips :smiley:

  1. Improve the typography. Add some space between paragraphs. It makes the text easier to read.
  2. Code is incredible hard to read. Add indentation, change font to monospaced, add some jQuery plugin to highlight the syntax.
  3. Code has wrong quotes. There are symbols instead of '. It means that code won't work if you just copy and paste it from the article.
  4. Be consistent. It's "jQuery" but not "jquery" or "JQuery". Same with "API".

Now about the code. This looks a bit strange:

for (i = 0; i <; 3; i++) {
    divsToAppend += '
    ';
}
$('#wrap').append(divsToAppend);

Looks like something inside the quotes (div tag?) was stripped by your CMS.

Also, I think there is no need for extra variable. Just move append() to inside the loop:

for (i = 0; i <; 3; i++) {
    $('#wrap').append('<div/>').attr('id', 'div'+i);
}

Hope this helps.


#4

Thank you and also for adding the extra snippet, will include it in the post and link it to this post. Now off to check out the link for jquery plugins


#5

@pdxSherpa

Have you considered using Markdown? A bit more blurb and it would make a nice article :smile:

Bring in some free APIs

As I am learning to be a better developer ( crossing fingers) I wanted to share some of the code that I have been working on. Also it’ll make it easier to find if when I need this again.

In this case I had decided to bring content in from outside API.

There are many outstanding sources of data from various APIs that are free and available to anyone who is interested. The one I used in these two examples are from ipiinfo and the Sunlight Foundation.

the code below reliant on javascript and jquery

In the html or php page I had very little, just the basics as I wanted to practice creating the divs and elements by way of javascript. So while there was an index.php. I added the various elements using a .js.

Simply put I had the “wrap” div in the index.php, I created the variable “var divsToAppend = “”;” and with this code a for loop was used to create three empty div and the counter was used to add a numerical identifier to their IDs and jquery helped with .addClass() so that I added the appropriate classes to the divs.

<script type="text/javascript">
    for (i = 0; i <; 3; i++) {
    divsToAppend += ‘

    ‘;
    }
    $(‘#wrap’).append(divsToAppend);
</script>

Ok so far so good. Al tough I am sure there are more elegant ways to do it as well. (I just haven’t got to them yet).

<script type="text/javascript">
    $(document).ready(function(){
    var divsToAppend = “”;
    var contentDivs = “”;
    var subDivs =””;//localstorage block
    //TBW//creating divs and appending content
    for (i = 0; i <; 3; i++) {
    divsToAppend += ‘

    ‘;
    }
    $(‘#wrap’).append(divsToAppend);
    $(“#div0”).addClass(“hdr”).html(“header yada”);
    $(“#div1”).addClass(“content”).html(” yada yada yada”);
    $(“#div2”).addClass(“footer”).html(“footer yada”);

    for (i = 0; i < 3; i++) {
    contentDivs += ‘

    // etc etc etc….});
</script>

Next, onward to the Sunlight foundation you can get a free ( a very good deal) the api key that will allow you to bring in the data they offer. On their API page you’ll see the API available list. Video training, tools, etc…So once you got your free key you can try it with the code below.

This first example was done after following an online tutorial. It used a .each() loop, a jQuery function.

<script type="text/javascript">
    $(“#senators”).submit(function(e){
    e.preventDefault();
    var $results = $(“#senator-results”);
    var zipcode = $(“#txt-zip”).val();
    var apiKey = “*****”; //the api you got, a long series of letters and numbers goes there in place of all them neat *
    var requestURL = “https://congress.api.sunlightfoundation.com/legislators/locate?callback=?”;//collecting and displaying your data
    $.getJSON(requestURL,{
    ‘apikey’ : apiKey,
    ‘zip’ : zipcode
    },function(data){
    if(data.results && data.results.length > 0){
    var senators = “<p> Here you go: </p>”;$.each(data.results, function(i, rep){
    if(‘senate’=== rep.chamber.toLowerCase()){
    senators += ‘<p>’;
    senators += ‘<a href=”‘ +rep.contact_form+ ‘” target=”_blank”>’;
    senators += rep.first_name +’ ‘+ rep.last_name;
    senators += ‘</a>’;
    senators += ‘</p>’;
    }
    });
    senators += ‘<p> Write em</p>’;
    $results.html(senators);
    $(‘#subSect0’).append($results.html(senators));
    }else{
    $results.html(‘<p> none found for’ +zipcode+ ‘</p>’);
    }
    });
    //$(‘#subSect0’).append($results.html(senators));
    });
</script>

And this is another request. But with a simple .get() and the .each() loop exchange to a for loop. Why? Mostly just for practice.

<script type="text/javascript">
    $.get(“https://congress.api.sunlightfoundation.com/bills?apikey=***********”, function (response) {
    //console.log(response);
    var i=0;
    var html = ”;
    for(i=0; i<response.results.length; i++){console.log(objList);
    var objList = response.results[i];
    html += ‘
    ‘
    html += objList.bill_id + ”;
    html += objList.chamber + ”;
    html += objList.official_title + ”;
    html += ‘

    ‘
$(“#ct0”).append(html);
}

}, “jsonp”);
</script>

And…one last api for this post. The very friendly and neat ipiinfo. No API key needed. This great little API will get you the City, co-ordinates, zip code, etc…

<script type="text/javascript">
    $.get(“http://ipinfo.io”, function (response) {
    $(“#ip”).html(“IP: ” + response.ip);
    $(“#address”).html(“Location: ” + response.city + “, ” + response.region + “, ” + response.loc);
    $(“#details”).html(JSON.stringify(response, null, 3));
    $(“#geoLoc”).css({
    “background-color”:”#066″,
    “color”:”#fff”,
    “font-family”:”sans-serif”,
    “font-size”:”14px”,
    “text-transform”:”uppercase” });
    }, “jsonp”);
</script>

And here are the links to jquery methods mentioned in the post.

.getJSON() .get() .each()

Posted in code
Tagged javascript, jquery, Sunlight Foundations


#6

Thank you John,

markdowns

?
Not trying to be dense, but not familiar with that term, short of going shopping for sales itemes..


#7

This forum uses Markdown to format the text.

I copied and pasted the content from your site, made very few adjustments and posted the result.

Markdown - LearnXinYminutes

Try searching for Markdown, there is a vast amount of info' available.


#8

All right will do, thank you John!


#9

Maybe ask one of the forum Moderaters to consider making your post into an article.


#10

Wow. Very kind end encouraging of you to say that. I think i butter jump in there, clean it up and add demos before I do that. But thank you, soon as am done will do.


#12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.