1

I have created a Node.js server (no PhP) to handle my requests. All I did was create a variable to hold the parsed json file (the response). The file path is correct; I've checked and double-checked. I have also checked the JSON data itself. Nothing appears to be corrupt there. This is the same site as the one I used for my first question. Here's the full project on GitHub: https://github.com/YungLonk/Practice-Node-JS. I included a vanilla js file that I know works in this project for y'all to understand what exactly it's supposed to do: just un-comment my script tag in html and comment out the jquery api and the jquery code. Here's some code from my jquery requests:

        $('#fav_button').on('click', function(e) { // listens for the faves button being clicked
        $.ajax({ // opens the request 
            type: "GET",
            url: "fav.json",
            timeout: 100,
            complete: function() {console.log(Response);}, // Every time, log the response to the console
            success: function() { // If all goes well...
                let $fav_item = ""; // create empty string...
                const $list = JSON.parse(Response); // parse the json file...
                $list.each(function() { // and loop through the file, appending each song, artist, and mood to the empty string
                    let $copy = $fav_tem; // copy the template
                    $copy.text($copy.text().replace('%title', $list.song));
                    $copy.text($copy.text().replace('%artist', $list.artist));
                    $copy.text($copy.text().replace('%mood', $list.mood));
                    $fav_item.append($copy);});
                $('#faves_field').html($fav_item);}, // append the now-full string to the page
            error: function() {$('#faves_field').html(ErrorEvent);}});}); // if it fails, post the error to the page

What am I missing?

Hy-tech
  • 17
  • 6
  • Where does Response come from? All your callbacks have no parameters, same goes for ErrorEvent, moreover you are mixing case as they appear to be class types rather than variables, as you pass function(e) (lower case) in your first callback... – Dado Sep 15 '19 at 22:12

1 Answers1

0

You're not passing the Response to the success callback.

success: function(Response) {}

Same for complete callback (which will run and throw error after).

dw_
  • 1,707
  • 1
  • 7
  • 13
  • Okay. I tried doing that just now, and it gives me the same error just on line 2 instead. After that, I tried putting the variables inside the jquery object [ $() ], and I got the same thing. I did edit the json file at the beginning to make it look like `[{ ...`. What else could I do? – Hy-tech Sep 26 '19 at 16:40
  • jQuery autmatically parses the result as json object, you don't need the JSON.parse() – dw_ Sep 27 '19 at 10:39
  • Oh. I thought that only worked with getJSON(). Well, now it is logging the entire object, but It is not posting the actual JSON text to the page. I tried replacing `Response` with `ResponseText`, but it still logged the entire big object. I made sure to pass `ResponseText` as a parameter in the functions: `success: function(ResponseText) {...}` What now? – Hy-tech Oct 04 '19 at 19:29
  • It doesn't matter what name you give to the param. As a general rule PascalCase is used for classes, better to use camelCase. So normally you would have function(response) {} etc. – dw_ Oct 07 '19 at 15:47
  • You need to pass down the current object to jQuery.each so, `$(ResponseText).each(index, obj) {}`. Your $copy and $fav_tem is just a string, not a jQuery object. So the contents of the .each loop should be more like `$copy = $copy.replace("%title", obj.song); // same for artist // same for mood $fav_item += $copy;` – dw_ Oct 07 '19 at 16:02
  • It worked! After I added `$copy += "
    ";` after the last replace, Everything worked out fine. Just out of curiosity, why do I need the index parameter if I am not going to use it? Is it something similar to the event object?     – Hy-tech Oct 09 '19 at 16:48
  • Because the jQuery.each() [link](https://api.jquery.com/each/) function takes 2 parameters, and because you need to use the 2nd one, you need to specify the first one. [link](https://stackoverflow.com/questions/32197927/standard-conventions-for-indicating-a-function-argument-is-unused-in-javascript) – dw_ Oct 09 '19 at 21:45