supportedValues not defined error with json text content displayed as html

Having obtained a json object “news” using fetch (with api.rss2json.com service) to return an RSS feed, I sometimes encounter an error when trying to display encoded content as html text. In the code below, I can display news.content (which is content:encoded) in the #newsContent element as .text, but sometimes not as .html. As html, an error sometimes is displayed: “supportedValues is not defined”. I can, however, display a shortened version of the same text with html markup in news.description as html. I don’t see what may be causing this error and difference between the two elements, but I also don’t know what it is referring to.

Can someone provide guidance about what that error is pointing to? The error line (#6 in code box below) is the news.content display as html.

        $w("#newsHeadline").text = news.title;
        $w("#pubDateText").text =   news.pubDate;  //HOW TO STYLE THE RSS TEXT TO BE IN PREFERRED DATE FORMAT?
        $w("#categoriesArray").html  = news.categories.toString();
        $w("#newsSummary").html = news.description; // some feeds put html coding in the description element
        // converter maps xml "content:encoded" element to json "content" element
        $w("#newsContent").html = news.content;  // ERROR MSG: "supportedValues is not defined"  
        // BUT the html content displays as text only this way:  $w("#newsContent").text = news.content;  

A second question: How (in the second line in the above code) to convert the date text string (news.pubDate) into a preferred date format (such as mm/dd/yyyy)–is there a built-in method or do I need to create a new date value, then extract month, day and year, and then re-construct the date string?

And, if I may, a final question about formatting: the html elements in the rss-to-json have links and anchors that do not automatically display as I’d like (e.g., color and mouseover. They don’t seem to be the default styles as if I were entering them on the page manually.
Thanks!

Regarding your first question… It seems that you might need to check if news.content is undefined before trying to use it. Something like this:

if(news.content !== undefined) {
    // not undefined so there is content to be used
}

I really don’t know what’s expected as the response from the service. You will need to check with them on the details.

About dates… See the article Velo: Formatting Dates for information, or do an Internet search for date formatting in Javascript.

The Text element only supports a limited set of HTML. You will need to convert the response from the service to something that’s compatible with the Text element.

Thank you for responding! Regarding news.content display, the problem isn’t that the element is missing. The content will display as .text (showing the html markup), but sometimes the same content generates the supportedValues error if it is configured to display as .html. The content contains plain p-tags and a-tags and img-tags. What causes the .html display method to raise this error in some cases? Regarding formatting, I’m not seeking special formatting, but simply want the plain a-links to display the same way as if I had manually entered the link in a text element on the same page. For example, a plain a-link displayed as .html from the json content has the operative link, but is not underlined, while if I enter a link in the page editor, it is underlined. Why is that, since all I see in the json content is a plain a-tag and href address?

When I look in dev tools at the published page, the text element I entered manually has a paragraph class assigned (font_7) and the link has a span tag with style that assigns text decoration of “underline.” This apparently is automatically done by the editor. The json content when displayed as .html has a paragraph class assigned (font_8), but the link does not have a span tag, instead a css style: a {cursor: pointer; text-decoration: none;

Where is the default style for the .html display configured? Can I modify it so the css style is more consistent with the default style (or theme) that applies when text is entered through the editor?

Thank you again for considering my questions!
Doug

@dsac Apparently the error is a result of HTML that is not supported by the Text element. If you can get the offending content and post it here, I can try to evaluate to see what’s causing the problem.

Due to the limited HTML support, you might need to markup the text on your own before setting the text field. The other options would be to use an HtmlComponent or a CustomElement to display the text.

@yisrael-wix I’m wondering if you could help with something also related to the HTML API…

I have used the API to set the content of a text element inside a repeater using two different database fields and added a hyperlink to part of the text. Which has worked perfectly in preview, except it has removed the style formatting of the text.

But I can’t figure out how to add HTML with the variables to make sure the formatting stays as it should…

Here is the code :

let itemObj = $w("#programsDataset").getCurrentItem();
 const itemLocation = itemObj.location;
 const locationLink = itemObj.locationLink;
$w("#shortDescriptionText").html = itemObj.shortDescription + " at " + itemLocation.link(locationLink);

Is there a way to use the HTML API with dataset items?

@lisamthorpe You can use a limited set of HTML in Text elements. See the Text element documentation for a the supported HTML tags and CSS styles .