在Jquery中解析json_encode返回

Question

I am fairly new to json and I am having difficulty figuring out how to parse a particular json response. I did search a lot in this topic but I didn't find anything that suites or applies to my situation. So please bare with this question as I know it looks like a duplicate.

Let me first describe my scenario.

I have a Mysql table

Table Structure

mysql> describe faculty;
+-----------------------+-------------+------+-----+---------+-------+
| Field                 | Type        | Null | Key | Default | Extra |
+-----------------------+-------------+------+-----+---------+-------+
| faculty_id            | varchar(8)  | NO   | PRI | NULL    |       |
| faculty_name          | text        | NO   |     | NULL    |       |
| department_id         | varchar(8)  | YES  | MUL | NULL    |       |
| department_name       | text        | NO   |     | NULL    |       |
| profile_pic           | text        | NO   |     | NULL    |       |
| designation           | text        | NO   |     | NULL    |       |
| doj                   | date        | NO   |     | NULL    |       |
| email                 | text        | NO   |     | NULL    |       |
| highest_qualification | varchar(10) | YES  |     | NULL    |       |
| industrial_exp_yr     | smallint(6) | YES  |     | NULL    |       |
| industrial_exp_month  | smallint(6) | YES  |     | NULL    |       |
| teaching_exp_yr       | smallint(6) | YES  |     | NULL    |       |
| teaching_exp_month    | smallint(6) | YES  |     | NULL    |       |
| area_of_interest      | text        | NO   |     | NULL    |       |
| national_pub          | smallint(6) | YES  |     | NULL    |       |
| international_pub     | smallint(6) | YES  |     | NULL    |       |
+-----------------------+-------------+------+-----+---------+-------+
16 rows in set (0.01 sec)

My JS:

 $("#up_dept").change(function() {
        var dept = $('#up_dept option:selected').text();
        $.ajax({
            url: "proc/get_flist.php",
            type: "POST",
            data: {
                dept: dept
            },
            dataType: "json",
            async: true,
            cache: false,
            success: function(response) {
                // Tried naive forloop 
                // JSON.Parse
               // Nothing worked so kept blank
            }
        });
    });

PHP

$fac = new Faculty();
$dept = trim($_POST["dept"]);
$facul_list = $fac->faculty_list($dept);
echo json_encode($facul_list);

faculty_list function

function faculty_list($dept_name) {
        try {
            $db = new PDO(DB_CONN, DB_USER, DB_PASS);
            $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
            $query = "select * from faculty where department_name ='" . $dept_name . "';";
            $stmt = $db->query($query);
            if ($stmt->rowCount() > 0) {
                $list = $stmt->fetchAll();
                $db = null;
                return $list;
            } else {
                return "NULL";
            }
        } catch (PDOException $ex) {
            echo $ex->getMessage();

            //utils::log_error($ex -> getMessage());
        }
    }

The Response

[{"faculty_id":"fac_001","0":"fac_001","faculty_name":"Arnab Roy","1":"Arnab Roy","department_id":"dep_002","2":"dep_002","department_name":"Electrical Engineering","3":"Electrical Engineering","profile_pic":"card-arnab.png","4":"card-arnab.png","designation":"Asst. Prof","5":"Asst. Prof","doj":"2014-01-07","6":"2014-01-07","email":"[e-mail]","7":"[e-mail]","highest_qualification":"M.Tech","8":"M.Tech","industrial_exp_yr":0,"9":0,"industrial_exp_month":0,"10":0,"teaching_exp_yr":3,"11":3,"teaching_exp_month":0,"12":0,"area_of_interest":"CURCITS","13":"CURCITS","national_pub":0,"14":0,"international_pub":0,"15":0},{"faculty_id":"fac_002","0":"fac_002","faculty_name":"Utsav Banerjee","1":"Utsav Banerjee","department_id":"dep_002","2":"dep_002","department_name":"Electrical Engineering","3":"Electrical Engineering","profile_pic":"fac_002_ad-learning-centre.jpg","4":"fac_002_ad-learning-centre.jpg","designation":"Asst. Prof","5":"Asst. Prof","doj":"2014-02-09","6":"2014-02-09","email":"[e-mail]","7":"[e-mail]","highest_qualification":"M.Tech","8":"M.Tech","industrial_exp_yr":5,"9":5,"industrial_exp_month":0,"10":0,"teaching_exp_yr":0,"11":0,"teaching_exp_month":6,"12":6,"area_of_interest":"CIRCITS , BLOB ","13":"CIRCITS , BLOB ","national_pub":0,"14":0,"international_pub":3,"15":3}]

Now , I need to be able to console.log each field of the response say ,

response.faculty_id[0];

Please help me figure this out. I am not too sure if the response is a valid json or not.

Answer 1

response is an array, you need to loop it.

success: function(response) {
    $.each(response, function(index, data) {
      console.log(data.faculty_id);
    });
    // get the first one only
    console.log(response[0], response[0].faculty_id);
}