Parse AJAX response in HTML using Javascript

Question

I am using AJAX call in my code using Javascript.

function loadFacility(callback)
{
    //alert('In loadFacility');
    var xmlhttp;
    var keys=document.firstCallInformation.facilityselect.value;
    var urls="http://localhost:8080/webfdms/showFirstCallInformation.do?vitalsId=366";
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status == 200)
        {
             //var some=xmlhttp.responseXML.documentElement;
            var response = xmlhttp.responseText;
            console.log(response)
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET",urls,true);
    xmlhttp.send(null);
}
function loadFacilityCallback(response){
if(response != null){
    //alert(response);
    console.log(response);
    var div = document.createElement("div");
    div.innerHTML = response;
    document.getElementById("facilityselect").innerHTML = div.querySelectorAll("select#facilityselect");;
}

EDIT: I have updated my callback function. But here I received select list as [Object Nodelist]. Now how can I display in my HTML ?

In callback function I received the response as HTML now I want to parse that HTML response so that I can process it further. I am using plain javascript to do so. How to parse ajax response received as HTML?

Barmar · Accepted Answer · 2015-08-28 14:53:25Z

6

Create a DIV element and put the HTML in it innerHTML. That will parse it.

var div = document.createElement("div");
div.innerHTML = response;

Now you can process it in div, e.g. div.querySelector(".classname"). To get all the <select> tags, do:

var selects = div.querySelectorAll("select");

To put it into your webpage, you can do:

document.getElementById("facilityselect").innerHTML = div.querySelector("select#facilityselect").innerHTML

edited Aug 28, 2015 at 14:53

answered Aug 27, 2015 at 13:26

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

5 Comments

mahendra kawde Over a year ago

basically I want to fetch select tag from that parsed html and display it on page. and there are many select tags. so how do i fetch it ?

mahendra kawde Over a year ago

And I want to fetch particular select tag from the list of all select tag ?

Barmar Over a year ago

Use a more specific selector. select#someID. You do it just like you would if it were in the DOM.

mahendra kawde Over a year ago

Please see my edit. I updated my callback function and now I am getting nodelist in return. now the problem is how to update it on my html.

Barmar Over a year ago

You need to get the innerHTML of the object in your response so you can assign that to the innerHTML of your DOM. I've updated the answer.

Rayon · Accepted Answer · 2015-08-28 17:18:23Z

1

Try this:

var dom='Your http response';
var wrapper=document.createElement('div');
wrapper.innerHTML=dom;
var elemContainer=wrapper.firstChild;
var elemToFind=elemContainer.querySelectorAll('option');
var facilityselect=document.getElementById('facilityselect');
facilityselect.innerHTML='';
for(var i=0, len=elemToFind.length; i < len; i++){
    facilityselect.appendChild(elemToFind[i]);
}

Creating a fake div element and appending your string which contains a HTML string will help. To insert a DOM object in specific selector, you need to user appendChild method.In case you want to empty the selector and then insert the DOM then set innerHTML as empty (selector.innerHTML="") and then do the append operation.

edited Aug 28, 2015 at 17:18

answered Aug 27, 2015 at 13:25

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

5 Comments

mahendra kawde Over a year ago

basically I want to fetch select tag from that parsed html and display it on page. and there are many select tags. so how do i fetch it ?

mahendra kawde Over a year ago

Please see my edit. I updated my callback function and now I am getting nodelist in return. now the problem is how to update it on my html.

mahendra kawde Over a year ago

I am getting this error in console: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Rayon Over a year ago

Let us continue this discussion in chat.

mahendra kawde Over a year ago

document.getElementById("facilityselect").appendChild(elemToFind[0]); I tried this and checked on console there I can see my updated result. but when I go to web page and drop down a select box i can not see updated select list

Collectives™ on Stack Overflow

Parse AJAX response in HTML using Javascript

2 Answers 2

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related