Javascript parse response text from xmlhttpresponse

Question

I have the following text returned in an xmlhttpresponse and I need to parse it by the pipe separator. It should return an array where position 0 is Block1, position 1 is the nodename json data, position 2 is the userid data.

({"body": "Block1|[{\"nodeName\":\"DIV\",\"nodeIndex\":20,\"x_offset\":131,\"y_offset\":47}]|33|7|33|[{\"UserID\":\"d8b4e408-b013-417c08aaa-7cd3658f4160_05_01_2015_21_32_46_000\",\"os\":\"Windows\",\"browser_width\":1366,\"Count\":16}}]"})

I have tried this but having a brain lapse at the moment trying to figure out the solution.

function outputResult() {
        var response = invocation.responseText;
        var textDiv = document.getElementById("textDiv");
        textDiv.innerHTML += response;

        var arr = response.body.split("|");
        console.log(arr[0])
    }

Can you explain in more detail what you are trying to do in your function? It really doesn't make much sense to me. Why are you assigning the text to a div and then splitting it afterward? What is the data source and why does it insert these pipes in the data? — Yogi
– Yogi, Commented May 2, 2015 at 15:10
I am saving round trips to the server...get everything i need and return to the client, the Block1 data could have 10k items, so one shot saves the user time. — Rob
– Rob, Commented May 2, 2015 at 15:14

coderLMN · Accepted Answer · 2015-05-02 15:32:22Z

1

You need to parse the JSON data after split the string with '|' character, like the code in the for loop:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1>result</h1>
    <div id="textDiv"></div>
    <script>
        function outputResult() {
            var response = ({"body": "Block1|[{\"nodeName\":\"DIV\",\"nodeIndex\":20,\"x_offset\":131,\"y_offset\":47}]|33|7|33|[{\"UserID\":\"d8b4e408-b013-417c08aaa-7cd3658f4160_05_01_2015_21_32_46_000\",\"os\":\"Windows\",\"browser_width\":1366,\"Count\":16}]"});
            var textDiv = document.getElementById("textDiv");
            textDiv.innerHTML += response;

            var arr = response.body.split("|");
            for(var i in arr){
                if(arr[i].indexOf('[') === 0)
                arr[i] = JSON.parse(arr[i]);
            }
            console.log(arr);
        }
        outputResult();
    </script>
</body>
</html>

However, textDiv.innerHTML += response; will not show the response text as you may expect. Instead, it will be rendered as [object Object] , so you have to manually set the format to be displayed.

edited May 2, 2015 at 15:32

answered May 2, 2015 at 14:24

coderLMN

3,0861 gold badge23 silver badges26 bronze badges

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

3 Comments

Yogi Over a year ago

Don't think that will work as the incoming data is a string and not in a format that can be easily converted to an object. It would need to be cleaned up first before applying JSON.parse() or eval() to the parts. The best solution, if possible, would be to change the data source to output data in a more usable form.

Rob Over a year ago

@coderLMN I get undefined on the split...your suggestion is what would normally work if I were using jquery, but need it in javascript.

coderLMN Over a year ago

@Rob I updated my answer, putting the whole HTML file in. I tested it in Chrome browser. You can copy and save it to a .html file, open the file in a browser, and see the result in console output. It's pure javascript, and has nothing to do with jQuery or any other library.

Collectives™ on Stack Overflow

Javascript parse response text from xmlhttpresponse

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related