Polymer expression

Question

I'm trying to use the Polymer expressions to show certain things.

I have a .php file that prints out a json_encoded array of for example names. Now there's 3 possibilities the way I see it:

1. The list of names gets returned properly
2. There are no names found in a database, so null or something is printed
3. An error occured in the php file

So depending on what gets returned, I'd like to display the correcy message.

This can be done using <template if="{{conditionalValue}}">. This is what I have:

<template if="{{people != null}}">
    <template repeat="{{person in people}}">
        <name-card name="{{person.name}}">
        </album-card>
    </template>
</template>

<template if="{{people == null}}">
    <div>There are no people listed.</div>
</template>

This doesn't seem to work. When the .php file returns a list, the top templates both get executed and I get a whole list of <name-card> elements. However, when in the php file I do echo json_encode(null) for testing measures, nothing displays at all. So I must be doing something wrong with my conditionalValue. How do I test whether this is an array with elements in it?

Also, is there a way to test for non-json content, in case of an error on the php script?

Answer 1

Use for example the developer console of Chrome (or some other tool) to see what the call to your PHP script actually returns (because "null or something" is a bit vague.)

Then at some point log the contents of the people property to see whats actually in it. I doubt that this property is really null. Presumably its something like "" or [] (or even "null").

If people is indeed null, then your code works fine. One can verify this with a small test element that only contains the two templates and sets the people property directly in the created() function.

In all other cases it depends. If the empty case is an empty array, you could write for example:

<template if="{{people.length > 0}}">

and

<template if="{{people.length == 0}}">

To your question regarding the non-json response error: it depends again. If you parse the JSON content with JSON.parse() yourself, then it will throw an exception in case of an error. If you use core-ajax, its current implementation catches the error, logs a warning and returns the XHR response text. So you may want to extend this element and overwrite the jsonHandler() function. Or use core-xhr and implement the JSON parsing yourself.

The best way to handle errors is to always return a valid JSON response (with properties like "error" or "message") and use HTTP status codes. See this SO question for further reading.