Error in processing *second* reference in JSON (getJSON)

So I have a card generator on my site that uses an external call to https://api.microlink.io/ and it’s great. The shortcode extracts the data and formats the card for my site. I really like the idea of what’s it’s doing so I decided to solve for this with my own little mini-project. Nothing against microlink - I’m nowhere near going over their free limit. I just wanted to do a project that will help me hone my F# chops doing something not out of a book or online course.

The head-scratcher for me is that it’s the second time it’s reading a value (or at least is seems) after it has parsed several other parameter fields that are using the same convention. :thinking:

The Error Code I’m seeing for “The Sad Path”

Error: Error building site: "C:\repo\PortfolioSite\content\post\ad4s-a-proposal.html:59:1": failed to render shortcode "ext-flink-card": failed to process shortcode: "C:\repo\PortfolioSite\themes\h3tech-future-imperfect\layouts\shortcodes\ext-flink-card.html:8:21": execute of template failed: template: shortcodes/ext-flink-card.html:8:21: executing "shortcodes/ext-flink-card.html" at <.ogurl>: can't evaluate field ogurl in type string
The system cannot find the path specified.

The happy path - Microlink based short code :white_check_mark:

So this shortcode works and I use it throughout my site. It was the inspiration behind me building my own web service.

{{ with getJSON (printf "https://api.microlink.io/?url=%s" (.Get 0 )) }}
<div class="card centered" style="max-width:36rem;width:100%;margin-bottom:2rem;">
    <div class="card-header font-weight-bold" style="letter-spacing:.15rem;">
        <a href="{{ .data.url }}" target="_blank">{{ .data.title | title }}</a>
    </div>
    <div class="card-body">
        {{ with .data.image }}
        <img src="{{ .url }}" alt="" class="card-img-top rounded bordered mb-2" style="width:100%;height:auto">
        {{ end }}
        <div class="mt-2 small">
                {{ with .data.description }}<caption>{{ . | htmlUnescape | markdownify }}</caption>{{ end }}
        </div>
    </div>
    <div class="card-footer">
        <div class="font-italic text-muted small">
            {{ with .data.author }}Author: {{ . }},&nbsp;{{ end }}
            {{ if and .data.author .data.publisher}}{{ end }}{{ with .data.publisher }}Publisher: {{ . }}{{ end }} 
            {{ with .data.date }}&nbsp;&middot;&nbsp;&nbsp;{{ dateFormat "Jan 02, 2006" . }}{{ end }}</div>
    </div>
</div>
{{ end }}

The Sad Path - h3portfoliosite path :x:

So it’s basically the same card as above, but with a different endpoint URL and different mapping to parse the returned JSON. As you can see, the error comes the second time it parses .ogurl, not the first. And it also steps through .ogtitle and with .ogimage without bugging out

{{ with getJSON (printf "[redacted]" (.Get 0 )) }}
<div class="card centered" style="max-width:36rem;width:100%;margin-bottom:2rem;">
    <div class="card-header font-weight-bold" style="letter-spacing:.15rem;">
        <a href="{{ .ogurl }}" target="_blank">{{ .ogtitle | title }}</a>
    </div>
    <div class="card-body">
        {{ with .ogimage }}
        <img src="{{ .ogurl }}" alt="" class="card-img-top rounded bordered mb-2" style="width:100%;height:auto">
        {{ end }}
        <div class="mt-2 small">
                {{ with .ogdescription }}<caption>{{ . | htmlUnescape | markdownify }}</caption>{{ end }}
        </div>
    </div>
    <div class="card-footer">
        <div class="font-italic text-muted small">
            {{ with .author }}Author: {{ . }},&nbsp;{{ end }}
            {{ if and .author .applicationname}}{{ end }}{{ with .applicationname }}Source: {{ . }}{{ end }} 
            {{ with .articlepublished_time }}&nbsp;&middot;&nbsp;&nbsp;{{ dateFormat "Jan 02, 2006" . }}{{ end }}</div>
    </div>
</div>
{{ end }}

When I send a request to my endpoint I get a valid response back - application/json content as expected.

HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Request-Context: appId=cid-v1:500264fd-271d-4a91-9043-cad965ee2bd7
Date: Sat, 12 Jun 2021 14:01:34 GMT
Connection: close

{
  "articlecontenttype": "Digital Article",
  "articlemodified_time": "2021-04-30T15:38:41Z",
  "articlepublished_time": "2021-04-30T12:15:22Z",
  "articlepublisher": "https://www.facebook.com/HBR",
  "articlesection": "Leadership",
  "articletag": "Change management",
  "description": "Three common mistakes to avoid.",
  "intromercial": "protected",
  "itemid": "tag:blogs.harvardbusiness.org,2007-03-31:999.295602",
  "itemname": "How Leaders Get in the Way of Organizational Change",
  "msapplicationconfig": "none",
  "ogdescription": "Three common mistakes to avoid.",
  "ogimage": "https://hbr.org/resources/images/article_assets/2021/04/Apr21_30_83266164.jpg",
  "ogsite_name": "Harvard Business Review",
  "ogtitle": "How Leaders Get in the Way of Organizational Change",
  "ogtype": "article",
  "ogurl": "https://hbr.org/2021/04/how-leaders-get-in-the-way-of-organizational-change",
  "oxgroup": "537063787",
  "pagecategoryid": "1571",
  "pagecategoryname": "Leadership",
  "pageid": "300",
  "pagetype": "ITEM",
  "primaryeditor": "198",
  "shopperattributes": "state:guest",
  "sid": "51087357-f558-4642-9b35-b45e9d708d82",
  "twittercard": "summary_large_image",
  "twittercreator": "@harvardbiz",
  "twitterimage": "https://hbr.org/resources/images/article_assets/2021/04/Apr21_30_83266164.jpg",
  "twittersite": "@harvardbiz",
  "uid": "D87CBDE7C12CA6C8DE82784D074BE54B",
  "viewport": "initial-scale=1,width=device-width"
}

I can’t figure out why the parameter doesn’t parse after it seems to successfully parse the parameter at first encounter. I’m hoping that someone with more Hugo experience will be able to shed some light on what I’m not seeing here. Since I have a known-good path it’s not a deal-breaker, but I definitely want to use this as away to increase my understanding. Thanks!

with

Rebinds the context ( . ) within its scope

So it’s looking for .ogimage.ogurl…

Of course! That’s what being a Hugo newb does when cribbing off of someone else’s work. The original provides a nested response and it hadn’t dawned on me since they have “url” at two levels. :grinning_face_with_smiling_eyes:

Thank you! :+1: :+1:

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.