Skip to content

Instantly share code, notes, and snippets.

@seanrasmussen
Created October 20, 2016 20:18
Show Gist options
  • Save seanrasmussen/bca07baea498a3b5a52836e1ba4bf957 to your computer and use it in GitHub Desktop.
Save seanrasmussen/bca07baea498a3b5a52836e1ba4bf957 to your computer and use it in GitHub Desktop.
nested single JSON object react/mobx issue
I switched the endpoint for the async call, so it returns this:
The JSON Data
---------------------------------
{
"id": 413,
"date": "2016-09-09T23:29:45",
"date_gmt": "2016-09-09T23:29:45",
"guid": {
"rendered": "http://localhost/sandbox1/quod-nihil-et-quod-qui-fugit/"
},
"modified": "2016-09-09T23:29:45",
"modified_gmt": "2016-09-09T23:29:45",
"slug": "quod-nihil-et-quod-qui-fugit",
"type": "post",
"link": "http://localhost/sandbox1/quod-nihil-et-quod-qui-fugit/",
"title": {
"rendered": "Quod nihil et quod qui fugit"
},
"content": {
"rendered": "<p>Consequatur illo et ex excepturi est error quaerat. Omnis et enim eveniet eum enim possimus quaerat. Voluptates eveniet sed earum quisquam magnam et. Ut ipsa sit consectetur est quo. Consequuntur perspiciatis vitae ex qui id id vitae nisi. Alias necessitatibus accusamus aut. Ut nobis placeat impedit in.</p>\n<h1>Doloremque nemo quidem illum. Accusantium veniam laborum et totam fuga laudantium officia. Vitae quas quasi voluptatibus voluptas ea non accusantium ad</h1>\n<p><img src=\"http://localhost/sandbox1/wp-content/uploads/2016/09/0b9e6285-2f6e-3837-b3de-3fc4fe1739a7.jpg\"></p>\n<hr>\n<h1>Consectetur eum aperiam cupiditate reprehenderit aut ea at blanditiis. Molestiae vel rerum nisi provident est non</h1>\n<hr>\n<h3>Eaque amet ut sunt ad rem qui asperiores reiciendis. Voluptatem labore commodi doloribus dolores ut et. Vel ut ex et aut</h3>\n<p><!--more--></p>\n<p><a title=\"Itaque aut.\" href=\"http://www.cremin.org/facere-asperiores-nobis-magni-cum\">Minus</a> aperiam rerum repellendus. Voluptates sit omnis velit sapiente. Atque veniam soluta delectus Dolorem quis in aliquam sed Nemo est quia atque ipsam molestiae. Ea cumque maxime et dolore. Similique animi accusamus non. Dolorem optio incidunt aut perspiciatis Perspiciatis quibusdam consequatur quibusdam saepe. Voluptatum rerum quo tempora facere voluptatem magnam. <a title=\"Et maiores ut necessitatibus temporibus doloribus et.\" href=\"https://murphy.com/sit-quos-dolore-reprehenderit-nihil-enim-expedita.html\">vitae ad omnis nisi</a> Esse ratione voluptatibus odit. doloribus voluptate commodi sit et. Est aliquid suscipit voluptatem. maxime fugit ipsum. Eligendi sed inventore alias aut. Incidunt nesciunt ab sunt. Et ullam assumenda iure sunt Molestiae quasi vel reiciendis omnis Nihil dolorem libero veniam suscipit et. Non <a title=\"Dolores facere et sed ut.\" href=\"http://www.sawayn.com/\">excepturi voluptates.</a></p>\n<h2>Reiciendis est recusandae velit ducimus ullam. Sint tempore sint amet. Vel tenetur deserunt ea et sit assumenda similique. Unde ad possimus eveniet</h2>\n<p>Praesentium quis velit doloremque non asperiores. Consequatur eveniet placeat ducimus dolorum ut qui veniam. Sequi ea sit numquam veniam officiis. Similique expedita fugiat cupiditate vel molestiae architecto quia. Et ut eaque est asperiores voluptates. Odit necessitatibus sint ut. Veritatis tempore numquam enim. Unde autem minima temporibus sapiente. Fuga autem dolor minima. Eius iste dolor est voluptates. Dicta unde voluptates officiis unde. Quis perspiciatis ea inventore exercitationem fugit qui. Suscipit sunt delectus aliquam eum voluptas quos. Alias nostrum sit quae rerum soluta. Voluptas quia iste quis aut. Illum porro impedit aperiam voluptatem quis voluptatum aliquam. Eius qui ex quasi voluptates. Ullam quasi optio iste aut. Labore sunt neque vitae iste iusto possimus. Impedit ex placeat exercitationem dolor. Hic minima harum blanditiis ut et sit. Tempora veritatis doloribus ullam eius sed. A sit suscipit ut.</p>\n<h2>Ullam magnam incidunt et iusto error architecto</h2>\n<blockquote><p>Eos repellendus quam vel eos beatae perferendis. Voluptatem magni deserunt hic. et ut quidem Et vel aspernatur dignissimos. Esse <a title=\"Aliquid dolorem sed sequi animi.\" href=\"https://www.rice.info/laudantium-cum-repellat-molestiae-id-ut-ad\">molestiae voluptate nihil est</a> Dolorem cupiditate animi vitae reiciendis iure quia occaecati. a nostrum <a title=\"Et eius in sed omnis.\" href=\"http://www.dubuque.com/quam-itaque-dignissimos-architecto-est\">et.</a> at qui explicabo tempora itaque. Ratione alias repellat sapiente sed. Quod et <a title=\"Tenetur illo delectus aut eos.\" href=\"http://www.moore.com/aliquid-labore-ut-omnis.html\">quaerat quia. Exercitationem et ratione</a> quo est vero soluta. Quo mollitia cupiditate possimus distinctio molestiae ea. non consequatur velit veritatis Hic qui omnis sequi. Omnis tempore beatae explicabo doloribus soluta. est ea fuga voluptatibus odit iste. Ut libero repellat <a title=\"Neque quia ea totam fugiat.\" href=\"http://www.reilly.com/nam-ipsum-veritatis-aliquam-quo-amet-autem.html\">Expedita magni</a> illo ratione cupiditate. Cupiditate repudiandae enim nam. Fugiat cumque ratione rerum voluptatem culpa.</p></blockquote>\n<blockquote><p>Delectus iste iusto et omnis. Ut <a title=\"Beatae dicta et et qui consequatur sint.\" href=\"https://www.schulist.com/rerum-tempore-eius-error-illum-deserunt\">aut harum</a> soluta consequatur. Nobis sed sint <a title=\"Quam occaecati assumenda qui.\" href=\"http://schmidt.info/\">ut cum. Autem quis odit quasi</a> facere dolor ipsum molestiae. Occaecati sit iusto velit. mollitia eligendi autem molestiae repudiandae dolorem. tempora labore voluptatem <a title=\"Est omnis officiis voluptate.\" href=\"http://hessel.org/culpa-blanditiis-magni-soluta-ducimus.html\">sunt nulla</a> Commodi provident animi quia ipsam. Tempore tempore dolores id cumque. Modi et ut cum unde. Et <a title=\"Minima fuga.\" href=\"http://nitzsche.org/\">molestiae</a> Quia qui voluptate <a title=\"Ut eos molestias totam.\" href=\"https://thiel.com/quis-sit-et-facere-ipsum-nisi-at.html\">incidunt. Facere qui veritatis mollitia</a> temporibus nihil. maiores voluptas magnam quas ducimus et maiores. Ipsam modi assumenda enim. Consequuntur ut accusantium nihil. consequatur inventore quod eum. Veniam ratione <a title=\"Iusto fugiat quas aperiam.\" href=\"http://www.abshire.com/\">ipsum non quo</a> Sit qui repudiandae <a title=\"Rem cupiditate.\" href=\"http://wiegand.biz/reiciendis-dolor-adipisci-velit-et-excepturi\">reiciendis. Excepturi ad</a> <a title=\"Temporibus quaerat quasi.\" href=\"http://www.hintz.com/nam-quam-dolor-repellat-incidunt-sed-non\">sint natus</a> numquam Eum et in nemo Laborum in dolor voluptas consequatur repudiandae. non illum animi quos. Praesentium excepturi <a title=\"Consequatur in voluptas similique reiciendis qui consequatur.\" href=\"http://corkery.com/\">error quia</a> vitae.</p></blockquote>\n"
},
"excerpt": {
"rendered": "<p>Consequatur illo et ex excepturi est error quaerat. Omnis et enim eveniet eum enim possimus quaerat. Voluptates eveniet sed earum quisquam magnam et. Ut ipsa sit consectetur est quo. Consequuntur perspiciatis vitae ex qui id id vitae nisi. Alias necessitatibus accusamus aut. Ut nobis placeat impedit in. Doloremque nemo quidem illum. Accusantium veniam laborum et … <a href=\"http://localhost/sandbox1/quod-nihil-et-quod-qui-fugit/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Quod nihil et quod qui fugit”</span></a></p>\n"
},
"author": 1,
"featured_media": 0,
"comment_status": "closed",
"ping_status": "open",
"sticky": false,
"format": "standard",
"categories": [
6,
5
],
"tags": [],
"author_name": "Sean Rasmussen",
"featured_image_src": null,
"_links": {
"self": [
{
"href": "http://localhost/sandbox1/wp-json/wp/v2/posts/413"
}
],
"collection": [
{
"href": "http://localhost/sandbox1/wp-json/wp/v2/posts"
}
],
"about": [
{
"href": "http://localhost/sandbox1/wp-json/wp/v2/types/post"
}
],
"author": [
{
"embeddable": true,
"href": "http://localhost/sandbox1/wp-json/wp/v2/users/1"
}
],
"replies": [
{
"embeddable": true,
"href": "http://localhost/sandbox1/wp-json/wp/v2/comments?post=413"
}
],
"version-history": [
{
"href": "http://localhost/sandbox1/wp-json/wp/v2/posts/413/revisions"
}
],
"wp:attachment": [
{
"href": "http://localhost/sandbox1/wp-json/wp/v2/media?parent=413"
}
],
"wp:term": [
{
"taxonomy": "category",
"embeddable": true,
"href": "http://localhost/sandbox1/wp-json/wp/v2/categories?post=413"
},
{
"taxonomy": "post_tag",
"embeddable": true,
"href": "http://localhost/sandbox1/wp-json/wp/v2/tags?post=413"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
}
----------------------
SubPage.js works as expected (I can display the title.rendered, and excerpt.rendered)
@Protected @DataWrapper @inject("store") @observer
export default class Subpage extends Component {
constructor(props) {
super(props)
this.store = this.props.store
}
render() {
return (
<div className="page posts">
<h1>Posts</h1>
<p className="subheader">Posts are fetched from http://localhost/sandbox1/wp-json/wp/v2/</p>
<hr />
<ul>
{this.store.items && this.store.items.length ? this.store.items.map(post => {
return <li key={post.id}>
<Link to={`${this.props.pathname}/${post.id}`} activeClassName="active">
<h1>{post.title.rendered}</h1>
</Link>
<p>{post.excerpt.rendered}</p>
</li>
}) : 'Loading...'}
</ul>
</div>
)
}
}
--------------------------------
SubItem.js (does not work as expected for anything except the top level objects)
import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'
import { Link } from 'react-router'
import DataWrapper from './DataWrapper'
import Protected from './Protected'
@DataWrapper @Protected @inject("store") @observer
export default class Subitem extends Component {
render() {
return (
<div className="page post">
<Link to="/posts">&larr; Back to Posts</Link>
{this.props.store.item ?
<article>
<h1>{this.props.store.item.title.rendered}</h1>
<p>{this.props.store.item.content.rendered}</p>
</article>
: null}
</div>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment