Build a Persistent API - Codestrips

My question comes from

https://www.codecademy.com/paths/web-development/tracks/building-a-persistent-api/modules/persistent-api-cumulative-projects/projects/codestrips-prj

which is part of the Web Development course.

I have the following code for my app.js:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 4001;
const bodyParser = require('body-parser');
const morgan = require('morgan');
const sqlite3 = require('sqlite3');
const db = new sqlite3.Database(process.env.TEST_DATABASE || './db.sqlite');

app.use(express.static('public'));

app.use(morgan('dev'));

app.use(bodyParser.json());

app.get('/strips', (req, res, next) => {
  db.all("SELECT * FROM Strip", (err, rows) => {
    if (err) {
      console.log(err);
      res.sendStatus(500);
    } else {
      res.send({ strips: rows });
    }
  });
});

app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
})

module.exports = app;

I have had correct code I believe but reverted to watching the video as I cannot truly know if my GET route is working properly since there is no proper rendering.

Following Steps 12-15, I am shown through the video that I should be able to see the comic strip change once I click on the saved comic strip values at the bottom of the html page. For some reason the strips labeled “A great day” and “Cosmic jokes” do render, but clicking on them renders nothing for the comic strip. Can anyone spot where my error is because I’ve check everything a few times and I can’t find where my error would be.

My SQL file is correct so i won’t supply it.
These are the only two files that we have to work with, the rest should be provided by codecademy

The problem is either in my code or through codecademy and I will continue with the next steps for now as I am sure my code is the same as the videos

Also to note is that the MOCHA testing does not return any problems either.


GET /strips 200 3.053 ms - 405
✓ should send all rows from the Strip table
GET /strips 200 0.571 ms - 405
✓ should return a 200 status code

Here is the youtube link to compare their code to my own. it is an older version video so some commands are a little more updated but should be of no consquence

Start at 18:40 for step 11

I tested your code in my project and was able to view the comic strips fine

The only thing I changed was the server start message to be sure Codecademy was using the new code.

You mentioned the SQL is correct and the tests for that passed. Is it possible that changes were made to the database after seed.js was originally run? Maybe some of the data is missing somehow.

I added console.log(rows) before the data is sent back to the client and it showed this:

[ { id: 1,
    head: 'happy',
    body: 'x',
    background: 'boat',
    bubble_type: 'statement',
    bubble_text: 'Beautiful day to sail to code island',
    caption: 'A Great Day' },
  { id: 2,
    head: 'angry',
    body: 'plus',
    background: 'space',
    bubble_type: 'sound',
    bubble_text: 'What do aliens on the metric system say?\n          Take me to your liter!',
    caption: 'Cosmic Jokes' } ]

Do you notice any differences in yours?

1 Like

I do notice differences. For some reason I receive

GET /strips 200 4.702 ms - 405
✓ should send all rows from the Strip table
[ { id: 1,
head: ‘angry’,
body: ‘plus’,
background: ‘boat’,
bubble_type: ‘statement’,
bubble_text: ‘test1’,
caption: ‘testcaption1’ },
{ id: 2,
head: ‘angry’,
body: ‘plus’,
background: ‘boat’,
bubble_type: ‘statement’,
bubble_text: ‘test2’,
caption: ‘testcaption2’ },
{ id: 3,
head: ‘angry’,
body: ‘plus’,
background: ‘boat’,
bubble_type: ‘statement’,
bubble_text: ‘test3’,
caption: ‘testcaption3’ } ]

when I console log my rows. I thought this result would be correct although there are in fact two different seed.js
This is strange. In my bash console I do
node sql.js
node seed.js
node app.js

And i thought it would use the same localized seed.js file. But now i see that is not the case. Thank you for helping advance that insight. I will post my SQL code here.


const sqlite3 = require('sqlite3');
const db = new sqlite3.Database('./db.sqlite');

db.serialize(() => {
  db.run(`DROP TABLE IF EXISTS Strip`);

  db.run(`
      CREATE TABLE Strip (
      ID int PRIMARY KEY,   
      head text NOT NULL,
      body text NOT NULL,
      background text NOT NULL,
      bubble_type text NOT NULL,
      bubble_text text NOT NULL,
      caption text NOT NULL)
     `);
  }
)

My SQL still passes all tests so I dont believe that is the problem
I am unsure as to why it doesnt use the correct seed.js I will try to direct my code to use the correct file. After that I will post any more questions
Oh, also when I do

node seed.js
The message which is part of the localized seed.js does appear in my bash console.

$ node seed.js
Finished seeding. There are 2 rows into the Strip table.

TLDR:

My code SOMEHOW links ‘test/seed.js’ to seed my SQL table, rather than simply using the local seed.js which has the correct values I need.
While still somehow rendering the correct 'A Great Day" and “Cosmic Jokes” on the HTML page.
:roll_eyes:

WAIT
I get two different results
Through MOCHA testing I get 'test/seed.js" results in my bash console

But I just looked back at the bash console which I run node app.js and I do in fact have the correct values.

Whats up with this thing D:

My concern with this is that MOCHA can be run at any time, so that should supposedly be the current values saved. So why does it log the correct values in the original console? Something does change for some reason. It may be the console commands! I am unsure

It’s alright that mocha is showing different results for that console.log() we added. If you peek into test/test.js, you’ll see that it creates its own test database. It still does some testing on the ‘production’ database (your database), but it removes the rows it adds if it doesn’t encounter an error. If you look closely at the console, you’ll also see that it runs your server on port 8081 instead of 4001 during testing, too.

This is what stands out to me from your screenshots. At first they look like correct values, but
image

That would explain being able to see the comic strip names but not being able to click to see more details. It’s very likely that the front-end is using the id to reference the specific comic strip after the user clicks.

There are 2 things that need to be addressed here: 1) the null values, 2) the uppercase ‘ID’ in the JSON sent to the front-end.

The reason the uppercase ‘ID’ is problematic in the JSON is that JavaScript (and many other languages) will treat id and ID as different properties. So even when you fix the null value issue, you’ll still see the same behavior of not being able to view the comic strip.

I’ve found that sqlite is so not picky to the point that it can be difficult to troubleshoot sometimes. It accepts almost anything, so the tests can sometimes pass when they shouldn’t. For example, in this case it allowed what is supposed to be the primary key to be null for multiple records.

You know what needs to be addressed and why now, so I’ll put the rest of this in a spoiler tag in case you want to tackle it on your own.

Click for more details

sql.js

  • change ID to id
  • change int to integer
1 Like

You’re a star Thanks so much !