How to get data back to the Ajax call?

JavaScript
1

This has me stumped. I was certain this is the way to do it but obviously can’t get it to work. It just renders out the json data to the browser page. No html is created.

The .get in api.js

.get(function (req, res){
   var project = req.params.project;
   Project.findOne({"project_title": project}, function (err, data) {
      if (data) {
         console.log(data); // successfully logs out the object from database
         return res.json(data);
      }
   }); 
})

the js in issue.html

$.ajax({
   type: "GET",
   url: url,
   success: function(data)
   console.log(data.project_title);
   {
	var issues= [];
	data.issues.forEach(function(ele) {
	  console.log("ELEMENT"  :  +ele);
	  var openstatus;
	  (ele.true) ? openstatus = 'open' : openstatus = 'closed';
	  var single = [
		'<div class="issue '+openstatus+'">',
		'<p class="id">id: '+ele.issues._id+'</p>',
		'<h3>'+ele.issues.issue_title+' -  ('+openstatus+')</h3>',
		'<br>',
		'<p>'+ele.issues.issue_text+'</p>',
		'<p>'+ele.status_text+'</p>',
		'<br>',
		'<p class="id"><b>Created by:</b> '+ele.created_by+'  <b>Assigned to:</b> '+ele.assigned_to,
		'<p class="id"><b>Created on:</b> '+ele.created_on+'  <b>Last updated:</b> '+ele.updated_on,
		'<br><a href="#" class="closeIssue" id="'+ele._id+'">close?</a> <a href="#" class="deleteIssue" id="'+ele._id+'">delete?</a>',
		'</div>'		
	  ];
	  issues.push(single.join(''));
	});
	$('#issueDisplay').html(issues.join(''));
  }
});

The problem is that return res.json(data); is just writing out the data to the browser page. There is no HTML being created by the successful ajax function.
console.log(data.project_title); inside the ajax isn’t logging out the value of project_title

Where am I going wrong with regards to getting the data back to the ajax call?

2

You might have a typo in your ajax code. You probably meant for console.log(data.project_title) to go below the {, not above it

3

The ajax success function isn’t been ran at all.
The return res.json(data); is overwriting the html page with the response.

I’ve tried return data but his gives a 502 Bad Gateway error

4
Is that an express app? You're missing the path in `.get`, like ``` .get('/api/data', function(req, res) { // ... }) ```

EDIT. I totally forgot that you can do app.route(’/api/data’).get(function…)

You should also cover all of the possible scenarios in the get handler. You didn’t define how the backend should behave when there’s no data, or if there’s an error while fetching a project.

1 Like
5

the .get is chained to app.route('/api/issues/:project')

This is the full project
https://glitch.com/edit/#!/fcc-proj-issue-tracker

6

I forked your project and noticed a commented out mongodb uri in the .env file (it seems glitch preserves the comments in the .env file; you might want to remove it later). I’m assuming that it’s the one you’re using. Opening the logs shows me this error:

connection error:  { MongoParseError: Unescaped at-sign in authority section

I think mongodb isn’t expecting a @ character in the password.

7

I had changed the mongodb account to one without a @ in the password.
I can successfully return data from the database and console log it.
I just can’t get that data back to the front-end other than by using res.json(data) which overrides the html being created in the ajax success function.

My issue.html looks like:
image

8

yes… I totally agree. I’m very early on in this project and I just want to get the data getting/rendering working before fine tuning.
But I guess if I put in error catching I might actually see what’s erring :thinking:

I usually do a ‘proof of concept’ first. But maybe that’s a bad idea.

9

I spotted some syntax errors in the issue.html script. In particular the first two console.logs in the first ajax call have rogue colons in them

10

The code was referencing ele.issues, which doesn’t exist. I replaced them with just ele.issue_title and ele.issue_text. I’m now seeing an issue under the form

11

If I go to https://fcc-proj-issue-tracker.glitch.me/api/issues/project%20test
I still see the json being rendered

12

The /api/issues/:project does exactly that. You have another /:project route that uses the issues.html view. Here: https://fcc-proj-issue-tracker.glitch.me/project%20test

1 Like
13

ok… I need to work this out.
I thought /api/issues/:project was the url the data was returned to.

I need to take a step back and figure this out.
I had this worked out until FCC introduced the ajax layer. Now I’m just a bit confused.

oh! BTW… thank you so much for giving this your time! It is appreciated.