ruby on rails - how to read json file using ajax?

Question

I'm using these codes,

#In timetable/new.html.erb

<%= select_tag :department, options_for_select(
 @departments.collect{ |d| [d.department_name, d.id]}, nil),{ id: "department_select" } %>



#In timetable controller

def update_lectures
  if params[:department].to_i == 0
    @lectures = Department.find_by(department_name: params[:department]).l    ectures
  else
    @lectures = Department.find(params[:department]).lectures
  end
respond_to do |format|
  format.json { render :json => @lectures.to_json }
end




#In javascript

$("#department_select").change( function() {
  $.ajax({
    url: window.location.origin + '/timetable/update_lectures',
    dataType: "json",
    data: $("#department_select").serialize(),
    success: function(data){
      var str = '';
      for(var i = 0; i < data.length; i++) {
      str += '<li>' + data[name] + '</li>';
      }
      $('#lecture-container-body').html(str);
    }
  });
});

I want to know in #In javascript how can I read the 'data'?

When I use data[name] => "undefined"

When I use data[lecture_name] => "Uncaught ReferenceError: lecture_name is not defined" in console

@lectures will have these columns: id, lecture_name, lecture_division, passfail, .. etc.

(there is no 'name' column)

HELP please

Avoid using "name" as a variable name in javascript. It's a reserved keyword. — Katharine Osborne
– Katharine Osborne, Commented Nov 10, 2015 at 18:31
Have you tried to log data to the console and see what it looks like? the structure of what data is will be what will determine how you use it — x6iae
– x6iae, Commented Nov 10, 2015 at 18:33

sminutoli · Accepted Answer · 2015-11-10 18:56:16Z

1

First of all, you´re not extracting the index inside the for loop. So, the array doesn´t have the props you need.

In javascript you can access dynamically props using the brackets notation as you intended, but the property itself must be a String or a reference to a "string like" value...

 str += '<li>' + data[i]['name'] + '</li>'; //note the quotes in name!

is the same of doing

str += '<li>' + data[i].name + '</li>';

So, when you´re doing

str += '<li>' + data[last_name] + '</li>';

the interpreter looks for a variable named last_name which throws the error you mentioned.

edited Nov 10, 2015 at 18:56

answered Nov 10, 2015 at 18:34

sminutoli

8414 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

n8o Over a year ago

It didn't work .. :(.. just printed "undefined" I want to know what is the problem T.T

sminutoli Over a year ago

Can you console.log the data argument? Knowing the structure will be easy to help you. Cheers

n8o Over a year ago

I RESOLVE IT. THANKS ! I used console.log(data)

Katharine Osborne · Accepted Answer · 2015-11-10 18:33:30Z

0

In your success callback try:

success: function(data){
  var str = '';
  for(var i = 0; i < data.length; i++) {
  str += '<li>' + JSON.parse(data).lecture_name + '</li>';
  }
  $('#lecture-container-body').html(str);
}

The voodoo you need is JSON.parse(). It's the complement of JSON.stringify().

answered Nov 10, 2015 at 18:33

Katharine Osborne

7,0718 gold badges39 silver badges63 bronze badges

1 Comment

sminutoli Over a year ago

Katharine, using jQuery and dataType: 'json' jQuery do the parse for you, so the data argument received is a javascript object. Using plain javascript you´d be right, but you need to parse the string before it enters the for loop, otherwise you´d be iterating characters...

Collectives™ on Stack Overflow

ruby on rails - how to read json file using ajax?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related