Problem in accessing json values in jquery

Question

This is my JSON String:

{"success":true,"docSearch":
 [
  {"fName":"Sam",
   "lName":"Mehra",
   "email":"[email protected]",
   "mobile":"7859857230",
   "userImage":"IMG/patient.png",
   "address":"412/A Ganesh Nagar 2 gali no.1 Laxmi Nagar Near Ajay cycles, Mona Pg",
   "special":"Allergist, Dentist, Anesthesiologist, Cardiologist",
   "deg":"MBBS, BDS, BAMS, BUMS","experience":"3","fees":"3"},
   {"fName":"Samanyu",
    "lName":"Mehra",
    "email":"[email protected]",
    "mobile":"7859857230",
    "userImage":"IMG/regis.jpg",
    "address":"412/A Ganesh Nagar 2 gali no.1 Laxmi Nagar Near Ajay cycles, Mona Pg",
    "special":"Allergist, Dentist, Anesthesiologist, Cardiologist, Dermatologist",
    "deg":"MBBS, BDS, BAMS, BUMS, BHMS, BYNS",
    "experience":"3",
    "fees":"3"
    }
  ]
}

I want to access the values in jQuery.So far I did this:

success: function(data,textStatus,jqXHR){
            if(data.success){
                var img=document.createElement('img');
                $(data).each(function(index,item){
                $("#ajaxResponse").html("");
                $("#ajaxResponse").append("<b>First Name:</b> " + data.docSearch[index].fName+"<br>");
                $("#ajaxResponse").append("<b>Last Name:</b> " + data.docSearch[index].lName+"<br>");
                $("#ajaxResponse").append("<b>Email:</b> " + data.docSearch[index].email+"<br>");
                $("#ajaxResponse").append("<b>Experience:</b> " + data.docSearch[index].experience+"<br>");
                $("#ajaxResponse").append("<b>Fees:</b> " + data.docSearch[index].fees+"<br>");
                img.src=data.docSearch[index].userImage;
                $("#ajaxResponse").append(img);
                });
            }

If anyone reading this knows how to access JSON strings like this, please help me out. Note: This JSON string can also contain 1 value like:

    {"success":true,"docSearch":
 [
  {"fName":"Sam",
   "lName":"Mehra",
   "email":"[email protected]",
   "mobile":"7859857230",
   "userImage":"IMG/patient.png",
   "address":"412/A Ganesh Nagar 2 gali no.1 Laxmi Nagar Near Ajay cycles, Mona Pg",
   "special":"Allergist, Dentist, Anesthesiologist, Cardiologist",
   "deg":"MBBS, BDS, BAMS, BUMS","experience":"3","fees":"3"}
]
    }

EDIT 1:

    success: function(data,textStatus,jqXHR){
        //doc Name was correct so we have some information to display   
        if(data.success){
            var img=document.createElement('img');
            var br=document.createElement('br');
            $("#ajaxResponse").html("");
            $(data.docSearch).each(function(index,item){
            $("#ajaxResponse").append("<b>First Name:</b> " + item.fName+"<br>");
            $("#ajaxResponse").append("<b>Last Name:</b> " + item.lName+"<br>");
            $("#ajaxResponse").append("<b>Email:</b> " + item.email+"<br>");
            $("#ajaxResponse").append("<b>Usernames:</b> " + item.username+"<br>");
            $("#ajaxResponse").append("<b>Experience:</b> " + item.experience+"<br>");
            $("#ajaxResponse").append("<b>Fees:</b> " + item.fees+"<br>");
            img.src=item.userImage;
            $("#ajaxResponse").append(img);
            $("#ajaxResponse").append(br);
            });
        } 
             //display error message
             else {
                 $("#ajaxResponse").html("<div><b>No Record Found!!</b></div>");
             }
        },

I added a <'br'> tag so that there is a line break between both the content that's getting displayed but, there is no line break and it is also not displaying 2 images. For the first iteration, it just reads it and left it like that only and for the 2nd iteration, it is displaying the image. I want both the data 2 display image. Please HELP !!

EDIT 2: My problem got solved by keeping the var img=document.createElement('img'); in the loop so that whenever it sets a path for the image it it will display the image.

Hi what is $(d) here ? Isnt't that should be $(data).. ? — Swati
– Swati, Commented Nov 3, 2020 at 3:52
Hello, Actually, I was using JSON.stringfy to check the JSON string that's why I used d there, I did some debugging so I used d but I edited it. If I parse the JSON I get an error and when I tried to print it it's giving me "object Object" so I guess jquery parsed it automatically. This is just a note for you guys. If you can try to solve it please do, I really need it. I just want to access data from the JSON and it can be 1 string,2 string 3 strings etc that's why i need an array to access it. — Samanyu Mehra
– Samanyu Mehra, Commented Nov 3, 2020 at 4:48
Hi , your code is working fine check this .Did you add dataType: "json" to your ajax ? — Swati
– Swati, Commented Nov 3, 2020 at 5:00
Put these var img=document.createElement('img'); var br=document.createElement('br'); linside each loop that should work. — Swati
– Swati, Commented Nov 3, 2020 at 6:48

Sandeep K. · Accepted Answer · 2020-11-03 05:11:55Z

You have use foreach loop to wrong variable. Use foreach loop for data.docSearch not for data.

var data = {"success":true,"docSearch":
 [
  {"fName":"Sam",
   "lName":"Mehra",
   "email":"[email protected]",
   "mobile":"7859857230",
   "userImage":"IMG/patient.png",
   "address":"412/A Ganesh Nagar 2 gali no.1 Laxmi Nagar Near Ajay cycles, Mona Pg",
   "special":"Allergist, Dentist, Anesthesiologist, Cardiologist",
   "deg":"MBBS, BDS, BAMS, BUMS","experience":"3","fees":"3"},
   {"fName":"Samanyu",
    "lName":"Mehra",
    "email":"[email protected]",
    "mobile":"7859857230",
    "userImage":"IMG/regis.jpg",
    "address":"412/A Ganesh Nagar 2 gali no.1 Laxmi Nagar Near Ajay cycles, Mona Pg",
    "special":"Allergist, Dentist, Anesthesiologist, Cardiologist, Dermatologist",
    "deg":"MBBS, BDS, BAMS, BUMS, BHMS, BYNS",
    "experience":"3",
    "fees":"3"
    },{"fName":"Sandeep",
   "lName":"Mehra",
   "email":"[email protected]",
   "mobile":"7859857230",
   "userImage":"IMG/patient.png",
   "address":"412/A Ganesh Nagar 2 gali no.1 Laxmi Nagar Near Ajay cycles, Mona Pg",
   "special":"Allergist, Dentist, Anesthesiologist, Cardiologist",
   "deg":"MBBS, BDS, BAMS, BUMS","experience":"3","fees":"3"},
   {"fName":"Samanyu",
    "lName":"Mehra",
    "email":"[email protected]",
    "mobile":"7859857230",
    "userImage":"IMG/regis.jpg",
    "address":"412/A Ganesh Nagar 2 gali no.1 Laxmi Nagar Near Ajay cycles, Mona Pg",
    "special":"Allergist, Dentist, Anesthesiologist, Cardiologist, Dermatologist",
    "deg":"MBBS, BDS, BAMS, BUMS, BHMS, BYNS",
    "experience":"3",
    "fees":"3"
    }
  ]
}


$(data.docSearch).each(function(index,item){
                console.log(item.fName);
                });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

Problem in accessing json values in jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related