These are chat archives for FreeCodeCamp/HelpJavaScript

2nd
Jun 2018
Brad
@bradtaniguchi
Jun 02 2018 00:00
haha yes, I'm already home today hehe :P
Jason Luboff
@JLuboff
Jun 02 2018 00:00
Nice... see ya have a good weekend
Joseph
@revisualize
Jun 02 2018 00:01
Hey.
Gulsvi
@gulsvi
Jun 02 2018 00:01
Here's your spoiler code for :point_up: That challenge. Have a great weekend!
Hey, by the way :wave:
Brad
@bradtaniguchi
Jun 02 2018 00:05
thanks you too
Pieter Stokkink
@forkerino
Jun 02 2018 06:28
@GitHub-Henry thanks for the tips. I'm still in the middle of an 1800 page book on Haskell (granted the pages aren't very big) but will have a look at those.
I'm working on a linux box, does it make sense to learn C# on that, or would it be better to fire up my older Win10 laptop. I found MonoDevelop does support it on Ubuntu, but not sure about it all.
?
Henry
@GitHub-Henry
Jun 02 2018 06:44
when coding .net i recommend using visual studio, so using Win 10 would be good
there is a community edition of visual studio that is free to use
Henry
@GitHub-Henry
Jun 02 2018 06:52
in order of complexity, Deitel, Albahari, Troelsen. if you are new to .net Deitel is a good place to start
Jefferson
@jeffersonnnn
Jun 02 2018 09:11

Can i get help with this code. I am trying to get information(contacts) from an API rendered on a HTML table, but i can't seem to get the logic proper. Here is the jQuery logic

$('#mnu_contact').on('click', function () {
    curSelPage = "contacts";
    $('#nav_title').text('Contacts');
    showMainMenu(false);
    $.get( SERVER_URL+'/contacts.json', function(r_data) {
        var contacts = r_data;
        for (i in contacts) {
           $('#ul_sub_menu').append('<li><a href="#" class="item-link" onclick="selContact('+contacts[i]['id']+')"><div class="item-content">'+contacts[i]['name']+'</div></a></li>');
        } 
    });    

});

and here is the HTML end


<div class="page" data-page="page-contact">
    <div class="page-content">
        <div style="text-align: right;padding:20px;">
            <a href="#" onclick="onClickContactEdit({{contact['id']})">Edit</a>  &nbsp;
            <a href="#" onclick="onDeleteContact({{contact['id']})">Delete</a>                  
        </div>
        <div id="mnu_contact">
            <div class="row center"><h2>{{contact['name']}}</h2></div>
            <div class="center">{{contact['company']}}</div>
            <div class="">Phones</div>
            <div class="">{{contact['phones']}}</div>
            <div class="">Emails</div>
            <div class="">{{contact['emails']}}</div>
            <div class="">Addresses</div>
            <div class="">{{contact['physical_addresses']}}</div>
        </div>        
    </div>
</div>

help pleaseee

Pieter Stokkink
@forkerino
Jun 02 2018 09:33
@jeffersonnnn what happens when you log r_data?
@GitHub-Henry thanks again. :)
common c-bot, man deserves his cookies
Jefferson
@jeffersonnnn
Jun 02 2018 09:34
@forkerino how do i do that, please. And yeah, why is the bot not handing cookies. W e shall not take this.
Pieter Stokkink
@forkerino
Jun 02 2018 09:35

@jeffersonnnn after this:

$.get( SERVER_URL+'/contacts.json', function(r_data) {

just console.log(r_data)
check if the data comes back from the request. (alternatively you could check the network tab in your devtools).

Either way, check your console for errors as well.
Jefferson
@jeffersonnnn
Jun 02 2018 09:37
@forkerino starting dev server.... I shall be back like the Terminator.
Pieter Stokkink
@forkerino
Jun 02 2018 09:39
good luck
Jefferson
@jeffersonnnn
Jun 02 2018 09:46
@forkerino okay, i got this Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. from the console. That as well as the the test email for login test@example.com
Dhaval Vira
@dhavalveera
Jun 02 2018 09:47
any JavaScript Expert here ?
Pieter Stokkink
@forkerino
Jun 02 2018 09:48
@jeffersonnnn have you tried $.getJSON instead of $.get?
@dhavalveera perhaps, depends on your definition of Expert.
Dhaval Vira
@dhavalveera
Jun 02 2018 09:48
means I need some help regarding Learning of JS
Jefferson
@jeffersonnnn
Jun 02 2018 09:49
@forkerino that is an option. I'm getting to it right away.
Pieter Stokkink
@forkerino
Jun 02 2018 09:50
@dhavalveera if you ask your question, perhaps I can help
Dhaval Vira
@dhavalveera
Jun 02 2018 09:51
@forkerino I want to learn JavaScript but it is bothering me to Understand the JS, so can I start with jQuery so JavaScript will be little bit easy to Learn ?
Pieter Stokkink
@forkerino
Jun 02 2018 09:54
@dhavalveera I guess you can. jQuery is just a library that helps you to interact with the DOM (the HTML shown on the page) with easier syntax than plain JavaScript. It provides some helpful methods for doing things on the page. But for logic, you would still need to know the basics of JS. I would suggest just following the curriculum on FCC, it is ordered that way for good reasons.
dinesh
@1532j0004kg
Jun 02 2018 09:54
@dhavalveera Do the FCC , Its great one !
Otherwise watch youtube tutorials .
Dhaval Vira
@dhavalveera
Jun 02 2018 09:59
@forkerino I mean to say that I can learn jQuery first & then JavaScript ?
so after learning jQuery, maybe JavaScript will be bit easier
dinesh
@1532j0004kg
Jun 02 2018 10:00
Never !
Pieter Stokkink
@forkerino
Jun 02 2018 10:00
hahaha
dinesh
@1532j0004kg
Jun 02 2018 10:00
Jquery is library
you must understand basics of js ... !
Jefferson
@jeffersonnnn
Jun 02 2018 10:01
@forkerino the very array that i need it right in the console, but it still isn't printing.
Pieter Stokkink
@forkerino
Jun 02 2018 10:01
@dhavalveera Of course you can learn jQuery to do some basic things on a webpage first, but JS won't be easier, you will be smarter.
Dhaval Vira
@dhavalveera
Jun 02 2018 10:01
what ? @1532j0004kg @forkerino
dinesh
@1532j0004kg
Jun 02 2018 10:02
yes
Dhaval Vira
@dhavalveera
Jun 02 2018 10:02
but few people first jQuery then JavaScript will little easier to Understand then direct Studying of JavaScript
Jefferson
@jeffersonnnn
Jun 02 2018 10:02
@dhavalveera man, you need javascript to appreciate jQuery :smile: shrug:
Pieter Stokkink
@forkerino
Jun 02 2018 10:02
@jeffersonnnn ok so it is an array, in that case for ... in might be not the right tool in the box.
Try for ... of
Jefferson
@jeffersonnnn
Jun 02 2018 10:05
@forkerino a for of loop :smile: ?
Pieter Stokkink
@forkerino
Jun 02 2018 10:05
@dhavalveera jQuery solves part of the problems that you can solve with JS, but only a small part. By all means go ahead and learn it, it will be helpful to understand it a bit. I believe jQuery used to come before most of the JS in the old curriculum, I see they changed it a bit.
for ... in gives the indexes of an array
oh wait, you use them as indexes.
Jefferson
@jeffersonnnn
Jun 02 2018 10:09
@forkerino checking the docs...
Pieter Stokkink
@forkerino
Jun 02 2018 10:10
@jeffersonnnn I don't see the '#ul_sub_menu' element in your html
that might be a thing.
Jefferson
@jeffersonnnn
Jun 02 2018 10:13
@forkerino oh. where would have to be then?
Pieter Stokkink
@forkerino
Jun 02 2018 10:15
@jeffersonnnn $('#ul_sub_menu') will try to find something on the page and do something with it, if you don't have an element with that ID, all the chained methods won't work (or rather return something like null or undefined).
Jefferson
@jeffersonnnn
Jun 02 2018 10:20
@forkerino so the thing is i inherited this code and i totally didn't see this lool.
Pieter Stokkink
@forkerino
Jun 02 2018 10:21
lol
Well, try adding a <ul id='ul_sub_menu'> somewhere and see what happens
Jefferson
@jeffersonnnn
Jun 02 2018 10:30
@forkerino ugh just did. Same problems
<div class="page" data-page="page-contact">
    <div class="page-content">
        <div style="text-align: right;padding:20px;">
            <a href="#" onclick="onClickContactEdit({{contact['id']})">Edit</a>  &nbsp;
            <a href="#" onclick="onDeleteContact({{contact['id']})">Delete</a>                  
        </div>
        <div>
            <ul id="ul_sub_menu">
                <div class="row center"><h2>{{contact['name']}}</h2></div>
                <div class="center">{{contact['company']}}</div>
                <div class="">Phones</div>
                <div class="">{{contact['phones']}}</div>
                <div class="">Emails</div>
                <div class="">{{contact['emails']}}</div>
                <div class="">Addresses</div>
                <div class="">{{contact['physical_addresses']}}</div>
            </ul> 
        </div>        
    </div>
</div>
$('#mnu_contact').on('click', function () {
    curSelPage = "contacts";
    $('#nav_title').text('Contacts');
    showMainMenu(false);
    $.getJSON( SERVER_URL+'/contacts.json', function(r_data) {
        console.log(r_data)
        var contacts = r_data;
        for (i in contacts) {
           $('#ul_sub_menu').append('<li><a href="#" class="item-link" onclick="selContact('+contacts[i]['id']+')"><div class="item-content">'+contacts[i]['name']+'</div></a></li>');
        } 
    });    

});
Pieter Stokkink
@forkerino
Jun 02 2018 10:32
You seem to have removed the '#mnu_contact', so now it doesn't listen for clicks.
@jeffersonnnn
Jefferson
@jeffersonnnn
Jun 02 2018 10:38
@forkerino i'm looking for where to add this now.
Jefferson
@jeffersonnnn
Jun 02 2018 10:45
@forkerino same problems sigh
<div class="page" data-page="page-contact">
    <div class="page-content">
        <div style="text-align: right;padding:20px;">
            <a href="#" onclick="onClickContactEdit({{contact['id']})">Edit</a>  &nbsp;
            <a href="#" onclick="onDeleteContact({{contact['id']})">Delete</a>                  
        </div>
        <div id="mnu_contact">
            <ul id="ul_sub_menu">
                <div class="row center"><h2>{{contact['name']}}</h2></div>
                <div class="center">{{contact['company']}}</div>
                <div class="">Phones</div>
                <div class="">{{contact['phones']}}</div>
                <div class="">Emails</div>
                <div class="">{{contact['emails']}}</div>
                <div class="">Addresses</div>
                <div class="">{{contact['physical_addresses']}}</div>
            </ul> 
        </div>        
    </div>
</div>
Pieter Stokkink
@forkerino
Jun 02 2018 10:48
@jeffersonnnn ok, well, it is hard to say what is going on without more information. What does your console say? Can you check the contents of the ul element after clicking on the menu? Do you have a live version somewhere so I can check it out myself?
Jefferson
@jeffersonnnn
Jun 02 2018 11:05
@forkerino thanks for the help man, but i need you still :wave: , unfortunately i can't get it live anywhere. Here is a screenshot of the my console !(https://imgur.com/a/CIzEihr)
@forkerino also how can i chrck the contents of the ul element
Pieter Stokkink
@forkerino
Jun 02 2018 11:08
@jeffersonnnn Go to the Elements tab in the dev tools and find the ul element there. Check if there are li elements in there.
for example, I don't see a name prop on the elements in the data in the console (may be it fell of the screen?)
so you might have a bunch of empty li's
Nate Mallison
@NJM8
Jun 02 2018 11:14
@jeffersonnnn is the code local or on github?
codesandbox has an awesome feature where you can upload from command line or from a github repo and it'll put the site up
Daniel Simeonov
@dbsimeonov
Jun 02 2018 11:24
Guys I have a json file, should I include it in my html markup or to call it only from js?
Jefferson
@jeffersonnnn
Jun 02 2018 11:24
oh that sounds good. but i am getting my data served up from an api hosted on my machine. how is that supposed to work? @NJM8
Nate Mallison
@NJM8
Jun 02 2018 11:25
you mean like your api calls are to localhost?
Jefferson
@jeffersonnnn
Jun 02 2018 11:26
@NJM8 oh yes.
@forkerino checking for the ul right now :smile:
Nate Mallison
@NJM8
Jun 02 2018 11:26
well, it'll work on your own computer but not others haha
once you host the api somewhere it'll work
or put on some dummy data
Daniel Simeonov
@dbsimeonov
Jun 02 2018 11:27
So I have few massive arrays with objects, and want to expand my skills doing it with json file to store this data(hardcoded).
I'm just trying to link the json file that has all the content to my javascript
Jefferson
@jeffersonnnn
Jun 02 2018 11:47
@NJM8 at this pace, i'll have to sigh
Jefferson
@jeffersonnnn
Jun 02 2018 12:06
@forkerino there still? i see that there is an id attached to the ul but unfortunately i can't see any li under. Here is the image https://imgur.com/a/Uuwgori
Pieter Stokkink
@forkerino
Jun 02 2018 12:08
@jeffersonnnn check inside the ul_sub_menu just below
I think inside the div_sub_menu
would seem logical
Daniel Simeonov
@dbsimeonov
Jun 02 2018 12:09

So the JSON returns me error Unexpected token c in JSON at position 7 when I try to parse it. When I stringify it, returns me a string with the objects inside which are useless when they are string.. any ideas?
My json format is:

[
    {
        container: talentsWrapper,
        image: 'css/images/bartenders/jognpape.jpg',
        title: 'JOSH PAPE',
        location: 'WILDEBEEST VANCOUVER CANADA',
        desc: 'Josh Pape lets his superior craftsmanship shine through as he mixes up “Cognac West”.',
        btn: btnWithArrow
    }    
]

And my javascript

var ajaxhttp = new XMLHttpRequest();
var url = 'data/talents.json';

ajaxhttp.open("GET", url, true);
ajaxhttp.onreadystatechange = function(){
    if(ajaxhttp.readyState == 4 && ajaxhttp.status == 200){
        // var jcontent = JSON.parse(ajaxhttp.responseText);
        // console.log(jcontent);
        console.log(JSON.parse(ajaxhttp.responseText));

    }
}
ajaxhttp.send(null);
Jefferson
@jeffersonnnn
Jun 02 2018 12:28
@forkerino it isn't right there, is there anything i can bring forward to have you get insight into this problem? here is another snapshot of the div_sub_menu https://imgur.com/a/NNcbFGA
Pieter Stokkink
@forkerino
Jun 02 2018 14:33
sorry, was gone for a bit.
I don't see a relation between the html you posted here and the html you show in the pictures.
@jeffersonnnn
@dbsimeonov that doesn't look like valid json.
Moisés Man
@moigithub
Jun 02 2018 14:44
@dbsimeonov console.log first... check IF its a string or a json object before u try to parse it... (u cant parse an already parsed json)
Jefferson
@jeffersonnnn
Jun 02 2018 17:47
@forkerino thanks for keeping in touch :grin: So yeah, i made some amendments. The picture is the present state. For references, here is it again https://imgur.com/a/NNcbFGA
Dimitris Nik.
@dimitrissnk
Jun 02 2018 18:04
I am still getting the "ReferenceError: $ is not defined" :angry: https://codepen.io/dimitris51/pen/bMPjqd
Stephen James
@sjames1958gm
Jun 02 2018 18:07
@Dimitrios51 In codepen you have to include the jquery library to get $ defined
Dimitris Nik.
@dimitrissnk
Jun 02 2018 18:13
@sjames1958gm I think I did it and I no longer get that error, now I have this: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=opensearch&search=hacks. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)." :confused: -.-
Christopher McCormack
@cmccormack
Jun 02 2018 18:15
@Dimitrios51 Add the parameter &origin=* to your query parameters

https://www.mediawiki.org/wiki/API:Cross-site_requests

Unauthenticated CORS requests may be made from any origin by setting the "origin" request parameter to "*". In this case MediaWiki will include the Access-Control-Allow-Credentials: false header in the response and will process the request as if logged out (in case credentials are somehow sent anyway).

Dimitris Nik.
@dimitrissnk
Jun 02 2018 18:19
@cmccormack thanks for that.
Pieter Stokkink
@forkerino
Jun 02 2018 18:40
@jeffersonnnn So, are you sure that the html you showed us is displayed on the page? Because it doesn't really seem that way from the pictures you posted.
Ankur sharma
@ankur1163
Jun 02 2018 19:57
anybody hosting static website on google cloud?