How do I target a specific line dynamically from JSON with Ajax

Question

I have this function that calls JSON from a php file

function ajax_json_data(){
    var div = document.getElementById("div");
    var hr = new XMLHttpRequest();
    hr.open("POST", "test.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {            
            var d = JSON.parse(hr.responseText);            
                div.innerHTML += '<img src="images/'+d.num1.imageName+'" alt="'+d.num1.imageName+'" />';                    
        }
    }
    hr.send(null);
}

This is what the php file outputs

{

  "num1":{ "imageName":"img1.jpg","imgTitle":"Title1", "description":"desc1" },
  "num2":{ "imageName":"img2.jpg","imgTitle":"Title2", "description":"desc2" },
  "num3":{ "imageName":"img3.jpg","imgTitle":"Title3", "description":"desc3" }

}

My noob question is how do I target num2 from an anchor tag like;

<a href="#" onClick="ajax_json_data('num2')">Next Image</a>

I have tried

function ajax_json_data(x){

        //XMLHttpRequest

  var d = JSON.parse(hr.responseText);          
    div.innerHTML += '<img src="images/'+d.+x+.imageName+'" alt="'+d.+x+.imageName+'" />';                  

    hr.send(null);
}

but these give me errors can anyone help?

This was my solution

div.innerHTML += '<img src="images/'+d.[x].imageName+'" alt="'+d.[x].imageName+'" />';

code and learn

That should be work, please check the image path statically like this first. . Otherwise there may be issue on your API calling script. — rc.adhikari, Mar 24 '17 at 23:39
@rcadhikari that gives me this error `Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at XMLHttpRequest.hr.onreadystatechange (test:19)` — XpS Clan MajorPain77, Mar 24 '17 at 23:44
just in case, if its already return as json object, then you should be just using `var d = hr.responseText; ` — rc.adhikari, Mar 24 '17 at 23:47
@rcadhikari I have tried that too here is the error `Uncaught TypeError: Cannot read property 'imageName' of undefined at XMLHttpRequest.hr.onreadystatechange (test:20)` — XpS Clan MajorPain77, Mar 24 '17 at 23:53
I have prepared the example here, please check it https://www.w3schools.com/code/tryit.asp?filename=FDYRYLJN9K7Q — rc.adhikari, Mar 25 '17 at 00:22

How do I target a specific line dynamically from JSON with Ajax

0 Answers0