[object Object]

APIs Content Delivery API
1

Help needed!

I am getting data from Contentful, for news section. I get everything but the main article. I get image, title, date, but when I need to get/show article content I get this [object Object] .

I really dont get it.

2

Hi @bostjan.gartnar! Welcome!

Can you provide more details about the problem you’re having?

  • What language are you using?
  • Can you provide a code sample which outputs [object Object]?
  • What’s the structure of your news article?
  • What fields are you using?

Thanks!

3

Hello, Sure I can :slight_smile: and thank you for reminding me!

I am using javascript. This is the code I have:
class News {
async getNews() {
try {
let contentful = await client.getEntries({
content_type: “klubskeNovice”
});

  /* let result = await fetch("news.json");
  let data = await result.json(); */
  let news = contentful.items;
  /* let news = data.news; */
  news.sort(function(a, b) {
    return b - a;
  });

  news = news.map(item => {
    const { title, date } = item.fields;
    const { besedilo } = item.fields;
    const image = item.fields.image.fields.file.url;
    return { title, besedilo, image, date };
  });
  return news;
} catch (error) {
  console.log(error);
}

}
}
// display news
class UI {
displayNews(news) {
let result = “”;
news.forEach(news => {
result += `

        <div class="blog-content">
          <div class="img-container">
            <img src="${news.image}" alt="novica" />
          </div>
          <div class="date">${news.date}</div>
          <div class="post-title my-2 text-center font-weight-bold">
           ${news.title}
          </div>
          <div>
          <p class="post-content mb-5">
            ${news.besedilo}   <= this gives me [object Object]
          </p>
          </div>
        </div>
    


`;
});

displayNews.innerHTML = result;

}
}

And this is my .json on Contentful
"fields": [ { "id": "image", "name": "image", "type": "Link", "localized": false, "required": false, "validations": [], "disabled": false, "omitted": false, "linkType": "Asset" }, { "id": "title", "name": "title", "type": "Symbol", "localized": false, "required": false, "validations": [], "disabled": false, "omitted": false }, { "id": "date", "name": "date", "type": "Date", "localized": false, "required": false, "validations": [], "disabled": false, "omitted": false }, { "id": "besedilo", "name": "besedilo", "type": "RichText", "localized": false, "required": false, "validations": [ { "nodes": {} } ], "disabled": false, "omitted": false } ],

I use four fields, image, title (short text), date (Date), besedilo (rich text)

4

The content of a rich text field is stored in a structured JSON format and isn’t directly embeddable in HTML like you are trying to do. It looks like this:

Rich Text JSON Example 
const richTextDocument = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          marks: [],
          value: 'I am an odd paragraph.',
          data: {}
        }
      ],
      data: {}
    },
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          marks: [],
          value: 'I am even.',
          data: {}
        }
      ],
      data: {}
    }
  ]
};

Here’s the instructions to convert it into HTML:

  1. install the contentful rich-text-html-renderer package like so:
npm install @contentful/rich-text-html-renderer
  1. Import the documentToHtmlString function into your JS file
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
  1. then you need to change your displayNews function to look like this:
...
  <p class="post-content mb-5">
    ${documentToHtmlString(news.besedilo)}
  </p>
...

That should convert the rich text structured JSON into html like you are expecting.

Please see these links for more details and other examples:

Hope this helps!!!

5

Hi Charlie!

Thank you for this guide. But I have to say, it doesnt work…I followed your instructions, did everything you showed, but nothing happens.

I use Visual Studio Code, does this change anything?

6

Also, when I install it in VS, this is what I get…dont understand it really good

PS C:\Users\bostj\Desktop\KLUB WEBSITE> npm install @contentful/rich-text-html-renderer
npm WARN saveError ENOENT: no such file or directory, open ‘C:\Users\bostj\Desktop\package.json’
npm WARN enoent ENOENT: no such file or directory, open ‘C:\Users\bostj\Desktop\package.json’
npm WARN bootstrap@4.3.1 requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself.
npm WARN Desktop No description
npm WARN Desktop No repository field.
npm WARN Desktop No README data
npm WARN Desktop No license field.

  • @contentful/rich-text-html-renderer@13.4.0
    updated 1 package and audited 7 packages in 0.516s
    found 0 vulnerabilities
7

I am still searching for my issue. I did follow the instructions, checked evertything 3x, but still I dont get the result I want to.

Is there maybe issue with my node.js?