Xjyuk

I have a lightning web component that wires an apex method that calls out to JSONplaceholder.com to get back some data. I'm having issue with the whole component rendering at all. While in community builder (component lives in a community) I occasionally get an error saying

"This page has an error. You might just need to refresh it. Failed to initialize a component [postId is not defined] Callback failed: serviceComponent://ui.comm.runtime.components.aura.components.siteforce.controller.PubliclyCacheableComponentLoaderController/ACTION$getPageComponent Failing descriptor: siteforce-generatedpage-143e6e1e-5839-4709-8899-f2536a9ff760.c1564858326133".

I've confirmed the apex works by running it in the dev console.

Here is the code:

Apex

public without sharing class postController 

 @AuraEnabled(cacheable=true)
 public static String getPosts(Integer postId)
 Http http = new Http();
 HttpRequest req = new HttpRequest();

 string resource = 'https://jsonplaceholder.typicode.com/comments?postId=' + postId;

 req.setEndpoint(resource);
 req.setMethod('GET');

 HttpResponse res = http.send(req);
 String jsonData = res.getBody();
 system.debug(jsonData);
 return jsonData;
 

JS

import LightningElement, track, wire from 'lwc';
import getPosts from '@salesforce/apex/postController.getPosts';

export default class PracticePosts extends LightningElement 

 @track postInfo = [];
 @track postId = 1;
 @track error;

 @wire(getPosts, postId: `$postId`)
 getJSON(error, data)
 if (data) 
 this.postInfo = JSON.parse(data);
 else if (error) 
 this.error = error;
 
 

HTML

<template>
<lightning-card title="Posts" icon-name="custom:custom67">
 <div class="slds-m-horizontal-medium">
 <template if:true=postInfo.data>
 <p>My dataaaaaaa</p>
 <ul>
 <li for:each=postInfo.data for:item="post" key=post.id>post.name</li>
 </ul>
 </template>
 <template if:true=postInfo.error>
 <p>Dang</p>
 <p>postInfo.error</p>
 </template>
 </div>
</lightning-card>
</template>

There are some fundamental issues with the code.

The return type is a string as per your backend apex class and hence first thing is to parse the response into Javascript object .In your case the API is returning an Array and hence you will need an Array variable .

Here is how the correct JS code looks like

import LightningElement, track, wire from 'lwc';
import getPosts from '@salesforce/apex/postController.getPosts';


export default class JsonTest extends LightningElement 

 @track postInfo = [];
 @track postId = 1;
 @track error;

 @wire(getPosts, postId: '$postId')
 getJSON(error, data)
 if (data) 
 this.postInfo = JSON.parse(data);
 else if (error) 
 this.error = error;
 
 

The HTML template file is as below

<template>
<lightning-card title="Posts" icon-name="custom:custom67">
 <div class="slds-m-horizontal-medium">
 <template if:true=postInfo>
 <p>My dataaaaaaa</p>
 <ul>
 <li for:each=postInfo for:item="post" key=post.id>post.name</li>
 </ul>
 </template>
 <template if:true=postInfo.error>
 <p>Dang</p>
 <p>postInfo.error</p>
 </template>
 </div>
 </lightning-card>
</template>