Javascript array from php output? ERROR:[object HTMLParagraphElement]

[TC]

Hi guys.

I’m new so if I write something that didn’t make sense, please correct me!

I’m having a problem making Javascript/AJAX receive my php’s text ouput into a Javascript array.

My php page outputs a list of images which the Javascript needs to hide.

I can receive the array from the php page and display it using:

document.getElementById("demo").innerHTML=xmlhttp.responseText;

with this:

<p id="demo">This text will change to the php page's output.</p>

But I don’t know how to get that (list of images from the php page) into a Javascript array so I can loop through the images and apply

document.getElementById(response[i]).style.visibility="hidden";

to hide the images.

For the communication I’m using stuff like xmlhttp=new XMLHttpRequest();
etc.

I don’t actually need to display the array of image names in a paragraph. I learned that from online examples, lol.

How would I assign a Javascript variable to the php’s output:

I tried stuff like this:

var response = [(document.xmlhttp.responseText)];

and this:

  var response = document.getElementById("demo"); 

and this:

    var response = document.getElementByTagName("demo"); 

and this:

var response = par[0].innerHTML;

and this:

 var response = document.getElementById("demo").value;

But it’s not working :(
Must be doing it wrong.

Using an alert to show the value I get:

[object HTMLParagraphElement]

or

undefined

Any help would be great!
If you’d like me to post code I can but I’d have to clean it up first :)

Thank you in advance!

[__]

I don’t quite follow what you’re doing, but it seems you are on the wrong track. If I understand your intent even slightly, I don’t see why you’d be using innerHTML at all. I’m pretty sure you ought to be using JSON, but I’ll wait until I understand more about what you’re doing.

Please share:

• an example of the responseText your PHP script actually returns
• what you’re trying to do (in general, “casual conversation” terms)

[TC]

Hi and thanks for your reply, much appreciated.
Remember I’m brand new to Javascript. This is probably my 2nd week learning.

In the simplest terms:

Can you show me how I can assign a Javascript variable to a php page’s output?

Two pages:
Page 1 is a Javascript page which sends data to a php page.
Page 2 is a php page that processes the data then sends back text (a list of file names) to the Javascript page using print_r, sent as an array. If need be I could also use echo and send the list as a single string.

I need to put that text into a Javascript array so I can do stuff with it.

I have tried different response texts coming from the php page:

// when $testresponse is an array:
json_encode(utf8_encode($testresponse));
print_r ($testresponse);

// when $testresponse is a single string:
json_encode(utf8_encode($testresponse));
echo $testresponse;

Both of these seem to be getting to my Javascript page so the problem seems that I don’t know how to put the data into a Javascript array or variable. As mentioned prior I was able to display that text in a paragraph with id ‘demo’.

Instead of displaying the array in a paragraph I want it assigned to a Javascript variable/array so I can then do things with it.

I don’t know Javascript well enough to know how to assign the Javascript variable to the php’s output text. I thought the above code I was trying would work, but so far it hasn’t.

So the question remains :

Question:
How do I put the php’s text output from page 2 into a Javascript array into page 1?

My above code posted is me trying to assign a Javascript variable to the php returned text.

I should think anyone that knows Javascript/AJAX wouldn’t need a code sample because they must know how to put php output text into a Javascript variable….?

I’ll clean up my code or write a smaller example and post it if you still don’t understand.

THANK YOU!

[__]

Can you show me how I can assign a Javascript variable to a php page’s output?

You are already doing that. The php page’s output is stored in the variable xmlhttp.responseText. TBH, I don’t think this is what your problem actually is (see ⚠).

Page 2 is a php page that processes the data then sends back text (a list of file names) to the Javascript page using print_r, sent as an array.

If you’re using print_r, the response would be a string (well, it would be a string no matter what (because that’s the only data type HTTP understands), but in this case, you’re purposely converting it to a string first).

⚠

Please share an example of the responseText your PHP script actually returns (do not describe it: show us the text of the actual response. copy-and-paste).

We need to know what you’re working with, and what your intent (goal) is. It is impossible to provide meaningful advice without knowing the details of the situation. Please answer these questions as directly and plainly as possible:

• What type of variable is the response on your PHP page (before you send it)? an array? an object? a string (e.g., comma-separated values)?
• When the response gets to your webpage, do you expect it to be a list of filenames? a list of html <img> tags? something else?
• What type of variable do you want this list stored in? just a string (which you would need to parse)? a list (numbered array)? a map (name:value pairs; an object)?
• Assuming you want an array/object, what type of variable do you expect the values to be? strings? HTML markup? your OP implies you expect them to already be DOM elements…?

[TC]

Hi __.

I figured out the problem and now am able to successfully transfer my textual data from my php page to my Javascript page and have the Javascript page use the data. I’m doing it as a single string with delimiters instead of an array.
On the Javascript side I’m then parsing the string into an array and doing my loop work.

My webhost was having issues which might of been part of the problem!
For example, I had copy/pasted my good javascript page into a a new javascript page so I could modify it without messing up my progress in the original javascript page and the identical copy wouldn’t work!

I contacted my host and they did something then the duplicate javascript page worked and I proceeded to get it working well.

Question:
Is there any reason why I’d want to have php pass an array instead of my single string delimited that I parse on the javascript side?

Thank you :)

[__]

Is there any reason why I’d want to have php pass an array instead of my single string delimited that I parse on the javascript side?

In all likelihood, the best approach would be to json_encode your PHP array and then JSON.parse it to work with it as a javascript array/object.

However, I could not say for certain because you did not answer the questions I asked earlier. If you need any further help, please answer those questions first, so we can be sure about what we are trying to solve.

[TC]

What type of variable is the response on your PHP page (before you send it)? an array? an object? a string (e.g., comma-separated values)?

Well it’s an array that I convert to a single string because I didn’t know how to JSON.encode the array and I didn’t know how to have javascript accept the array. I would like to know those things so if I need it in the future.

When the response gets to your webpage, do you expect it to be a list of filenames? a list of html tags? something else?

A list of the filenames. Originally wanted an array but couldn’t make that work so as mentioned I just converted the array to a single string and added a delimiter and JSON’d it.

What type of variable do you want this list stored in? just a string (which you would need to parse)? a list (numbered array)? a map (name:value pairs; an object)?
Assuming you want an array/object, what type of variable do you expect the values to be? strings? HTML markup? your OP implies you expect them to already be DOM elements…?

Single string which I parse on the javascript side seems to work fine.
There is no HTML or anything, just the filenames. I’m using the file names to do stuff to them.
The php page moves the files then verifies they got moved correctly and then sends back the verified filenames to the the javascript page which then makes them disappear from the page – they are images.

So far I got it all working but I still don’t know how to have php pass an array and have javascript accept the array correctly. Didn’t know how to JSON the php array either.

I think I answered all of those questions :)

Thanks.

[__]

Okay: say, in PHP, you have an array of image urls:

$urls = array(
    "/url/image1.png",
    "/url/image2.png",
    "/url/image3.png"
);

Encode it as a JSON string and send it to the browser (this is your ajax response):

$json_urls = json_encode( $urls );
echo $json_urls;
exit;

So, once your script gets the ajax response, you’ll have a string in xmlhttp.responseText similar to:

["/url/image1.png","/url/image2.png","/url/image3.png"]

Parse it, and you’ll have a regular javascript array:

var urls = JSON.parse( xmlhttp.responseText );

/*  do stuff  */

[Author]

Posts