Is it possible to extract data from JSON within Makrdown posts?

support
1

Hello! I want to store my product’s informations within JSON-file (like product name, product price, release date, etc).

Because those products will display in different places (articles, pages, related content and other stuff). And for me convenient to store necessary information within single json, and add/edit new products within one single json file.

But I have a question. Is it possible then to extract and show data from my json file within markdown posts? I’m looking the documentation: Data Templates | Hugo, but can’t find any information about extracting and rendering data within markdown files.

2

If the data is to be displayed in the same location and format on every post, reference site.Data from the layout (e.g., layouts/posts/single.html).

If you need to display data on some posts but not on others, you might want to use a shortcode.

Hard to say without any details…

1 Like
4

Thank you for the answer!

No, I don’t want to display product on every post (then I shouldn’t to place site.Data within layout template).

But I want to use product info from site.Data within one specific post (markdown). How I can render site.Data within specific markdown file? For example, I have an article about best keyboards for gaming . Then I want to here extract some keyboards from my Data (JSON) file.

5

Use a shortcode. A simple example…

markdown

{{< get-data >}}

layouts/shortcodes/get-data.html

{{ with site.Data.foo }}
  Name: {{ .name }}
  Description: {{ .description }}
{{ end }}
6

ahh, I understand. So for each keyboard model I should create a separate shortcut, that extracts data from my JSON.

Why I can’t just extract a data directly within markdown file? For example, within post.md I’m unable to write?

{{ with site.Data.foo }}
  Name: {{ .name }}
  Description: {{ .description }}
{{ end }}

It will be much more convenient, than creating shortcuts for each extracted data.

7

Content goes in content files.
Template code goes in template files.

Shortcodes are the bridge.

8

Please see configuration parameter enableInlineShortcodes on Create your own shortcodes | Hugo .
Before you set it to true: The security hint there is NOT for nothing!

9

Thank you very much for the answers!

Please, can you check my case?

I have a keyboard in my data file. An example data:

Name: ASUS ROG Claymore II
Price: $229
Link: link-to-the-site.

And within different posts around text to promote this keyboard will be different. For example:

  • Post 1. We recommend you the keyboard: HERE IS KEYBOARD NAME and price is KEYBOARD PRICE
  • Post 2. Our recommended keyboard is KEYBOARD NAME, the actual price is equal to KEYBOARD PRICE.

I mean, I want to display name, price in different places within my post. Also textaround always should be different (to show keyboard name, keyboard price, link to buy the keyboard, etc). Sometimes I want to display only keyboard name, or keyboard price, or them both.

Sorry for bad English, I believe I was able to explain it.

10

Maybe you should place the data in a post’s front matter. then access with the built-in param shortcode.

11

And if a keyboards price or link will be changed, I should edit manually all articles in site range for updating?

12

Either that or make shortcodes for each element you wish to extract.

Why don’t you experiment to figure out what will work best for you?

13

Okay, thank you very much for the help!

I will try to figure out for my case. But looks like polnyi pizdes.

14

No. Create one shortcode that accepts a parameter. See documentation.

15

Thank you for the answer! But I don’t want to use a shortcodes, in my case it doesn’t help. I need to directly extract a data files within my content files (markdown posts).

16

I dont understand. Why I’m not able to just directly accessing site data within content (markdown) files.

I want to access necessary data directly within my content file (example-post.md):

{{ with site.Data.foo }}
  Name: {{ .name }}
  Description: {{ .description }}
{{ end }}

Code above doesn’t work within markdown files (posts).

17

Like @jmooring said

There lies your answer.

This might be the best solution for your case. Here is an example I use with frontmatter variables in shortcodes for my posts (it is not elegant, but it works for me for now. I am new to Hugo, so I would appreciate a more elegant solution too from any of the experienced devs):

  1. In your post’s frontmatter, you need to add the variables you want. e.g see the keyboard example below.
---
title: A
description: lorem ipsum
slug: /a-key-board/
keyboard:
    name: Keyboard Name
    price: keyboard price
---
  1. Then create a folder inside ./layouts/shortcodes e.g. keyboard with the files name.html and price.html with the code shown below respectively.
{{ with $.Page.Params.keyboard }}
 {{ .Name }}
{{ end }}

{{ with $.Page.Params.keyboard }}
 {{ .Price }}
{{ end }}

Then in your content, call either shortcode where you want it to appear as either {{< keyboard/name >}} or {{< keyboard/price >}}.

18

Thank you very much for the answer!

Yes, that’s almost what I need. But in my case there are dozens of keyboard models (about 40 in total). So I should to make 80+ shortcuts? It’s very dont convenient. If there a keyboard information will be updated, each time I should to update 2 files? It’s easy to forget.

And also there maybe other keyboard characteristics (keys type, wireless/non wireless, for gaming or for work, keyboard type, etc). So for every single keyboard I should to create 5-10 shortcuts? It’s not right way I guess.

Also strange, that there imposible to build different shortcuts within single shortcode file. Then access a necessary shortcode using shortcode name or other way…

19

Your problem is that you are not reading and understanding the solutions provided to you. Please read again what everyone (including me) wrote on how shortcodes are used. I have been there before, frustrated with having to figure out how Hugo works, but it helps to read and reread again!

I did not write anywhere that it is impossible. I wrote what I use and it works for me. That’s why I put a comment for a more elegant solution by the experienced devs.

20

Just to clarify: You can exactely do that with these .inline shotcode blocks. It’s a container where you can place code inside that normally wouldn’t be rendered in content files. This is an example from the Bootstrap docs. https://raw.githubusercontent.com/twbs/bootstrap/v5.1.3/site/content/docs/versions.md
See {{< list-versions.inline >}}.

Your code goes inside

{{< whateveryoulike.inline >}}
...
{{< /whateveryoulike.inline >}}

in content file.

The output: Versions · Bootstrap v5.3

21

I’m really a dummy noob, only now realizing, how it works (inline shortcodes). Thank you, it’s exactly what I need!