create entry into database

[Azinck94]

Hi guys, I am running into the following error when trying to create a new entry for my nba player database: POST http://localhost:4741/ballers 400 (Bad Request) am going to keep digging around my file structure and will update with my attempts to fix but here is where it stands

[Azinck94]

index.html:

              Create baller
        </button>
          <div class="modal fade" id="create-baller-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Create baller</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
                </div>

                <div class="modal-body">
                  <form id="create-baller">
                    <input class="create-baller" type="text" name="first_name" value="" placeholder="first_name">
                    <input class="create-baller" type="text" name="last_name" value="" placeholder="last_name">
                    <input class="create-baller" type="text" name="team" value="" placeholder="team">
                    <input class="create-baller" type="text" name="position" value="" placeholder="position">
                    <input class="create-baller" type="integer" name="buckets" value="" placeholder="buckets">
                    <input class="create-baller" type="integer" name="rpg" value="" placeholder="rpg">
                    <input class="create-baller" type="integer" name="apg" value="" placeholder="apg">
                    <input class="create-baller" type="text" name="sponsors" value="" placeholder="sponsors">
                    <input class="create-baller" type="text" name="shoes" value="" placeholder="shoes">
                    <input class="create-baller" type="text" name="catchphrase" value="" placeholder="catchphrase">
                    <input type="submit" name="submit" value="Create Baller!">
                  </form>
                </div>

[Azinck94]

events.js:

'use strict'

const getFormFields = require(`../../../lib/get-form-fields`)
const api = require('./api')
const ui = require('./ui')

const onCreateBaller = function (event) {
console.log('on createBaller invoked')
  const data = getFormFields(this)
  event.preventDefault()
  api.createBaller(data)
    .then(onShowAllBallers)
    .catch(ui.createBallerFailure)
}

const onShowAllBallers = function (event) {
  console.log(event.target)
  api.showAllBallers()
    .then(ui.showAllBallersSuccess)
    .catch(ui.showAllBallersFailure)
}
const addHandlers = function () {
  $('#create-baller-modal').on('submit', onCreateBaller)
  $('#ballers-list').on('click', onShowAllBallers)
  $('#delete-baller').on('submit', onDeleteBaller)
  // $('#update-baller').on('submit', onUpdateBaller)
  // $('.baller-board').on('click', '.card', onAddToMenu)
  // $('#show-menu-button').on('click', onShowMenu)
}

[Azinck94]

api.js:

const config = require('../config.js')
const store = require('../store')

const createBaller = (data) => {
  console.log('create entry in api running')
  console.log(data)
  return $.ajax({
    url: config.apiOrigin + '/ballers',
    method: 'POST',
    headers: {
      Authorization: 'Token token=' + store.user.token
    },
    data
  })
}

const showAllBallers = function (data) {
  return $.ajax({
    url: config.apiOrigin + '/ballers',
    method: 'GET',
    headers: {
      Authorization: 'Token token=' + store.user.token
    },
    data
  })
}
module.exports = {
  createBaller,
  showAllBallers,
  deleteBaller,
  // updateBaller
}

[Azinck94]

ui.js

const store = require('../store')
const showBallersTemplate = require('../templates/baller-database.handlebars')
// const showMenuTemplate = require('../templates/show-menu.handlebars')
const createBallerSuccess = (data) => {}

const createBallerFailure = () => {}

const showAllBallersSuccess = (data) => {
  store.ballers = data.ballers
  $('.baller-board').empty()
  $('.create-baller').val('')
  $('#create-baller-modal').modal('hide')
  // $('#create-baller-modal').modal('hide')
  let showBallersHtml = showBallersTemplate({
    ballers: data.ballers})
  $('.baller-board').append(showBallersHtml)

};
const showAllBallersFailure = () => {
}

const deleteBallerSuccess = () => {
}

const deleteBallerFailure = () => {
}
module.exports = {
  deleteBallerFailure,
  deleteBallerSuccess,
  showAllBallersSuccess,
  showAllBallersFailure,
  createBallerFailure,
  createBallerSuccess
}

[Azinck94]

I am getting the console logs from the onCreateBaller in events.js as well as the console log contained in the createBaller function in api.js.

21:41:12.027 :4741/ballers:1 POST http://localhost:4741/ballers 400 (Bad Request)
21:41:12.028 jquery.js:9566 XHR finished loading: POST "http://localhost:4741/ballers".```

[Azinck94]

Update: threw console log into onShowAllBallers and changed the way it way being called which at least got 1 step farther on the process working

const onCreateBaller = function (event) {
console.log('on createBaller invoked')
  const data = getFormFields(this)
  event.preventDefault()
  api.createBaller(data)
  onShowAllBallers(event)
}
const onShowAllBallers = function (event) {
  console.log('onShowAllBallers invoked')
  console.log(event.target)
  api.showAllBallers()
    .then(ui.showAllBallersSuccess)
    .catch(ui.showAllBallersFailure)
}

[Azinck94]

Am also seeing a successful console.log in my showAllBallersSuccess function in ui.js

[Azinck94]

Update for the crew: the show all ballers function now works so I can display the seeded list of players on clicking either the list ballers button or create baller button. The problem still lies with create ballers, which can list the seeded data but can't seem to actually perform its intended task of adding a player to the database. Could use a pair of eyes on it if anyone can find a minute, thanks!

[benjimelito]

I see that you're console.logging data in api.js. Would you mind posting what that data looks like? Does it match up with what you would expect?

[payne-chris-r]

Post the curl request that does work please!

[Azinck94]

@ben ```Object {}proto: Object 09:43:53.734

[Azinck94]

const showAllBallers = function (data) {
  return $.ajax({
    url: config.apiOrigin + '/ballers',
    method: 'GET',
    headers: {
      Authorization: 'Token token=' + store.user.token
    },
    data
  })
}

[benjimelito]

^^ That's a GET request brotha! It looks like the object that you're passing as data is empty though...

[Azinck94]

^^^that's the one that's working but here is the post request:

const createBaller = (data) => {
  console.log('create entry in api running')
  console.log(data)
  return $.ajax({
    url: config.apiOrigin + '/ballers',
    method: 'POST',
    headers: {
      Authorization: 'Token token=' + store.user.token
    },
    data
  })
}

[Azinck94]

sorry for that confusion!

[benjimelito]

Update: getFormFields should be called with event.target as an argument, rather than this

[Azinck94]

thanks!