JSON parsing in SwiftUI that includes HTML Tags

Question

always failing in formatting on this site so hopefully I can get this right.

I have the following json from a standard Wordpress blog:

{
  "id": 1006344,
  "link": "https:\/\/sneakernews.com\/2021\/03\/08\/adidas-ultra-boost-21-424-arsenal-gv9716-release-date\/",
  "title": {
    "rendered": "424 And adidas Honor Arsenal With A Sleek Ultraboost 21"
  },
  "excerpt": {
    "rendered": "<p>Planted right on Fairfax, 424 (sometimes styled FourTwoFour) has served the LA area&#8217;s high fashion needs for the better part of the past decade. And now, for their 2021 partnerships, the imprint is giving adidas a bit of help with their new Ultraboost 21. A rather simple take on the runner, the collaboration sees the [&hellip;]<\/p>\n",
    "protected": false
  },
  "author": 1130,
  "jetpack_featured_media_url": "https:\/\/sneakernews.com\/wp-content\/uploads\/2021\/03\/adidas-ultra-boost-21-424-arsenal-GV9716-release-date-lead.jpg",
  "_links": {
    "self": [
      {
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/posts\/1006344"
      }
    ],
    "collection": [
      {
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/posts"
      }
    ],
    "about": [
      {
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/types\/post"
      }
    ],
    "author": [
      {
        "embeddable": true,
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/users\/1130"
      }
    ],
    "replies": [
      {
        "embeddable": true,
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/comments?post=1006344"
      }
    ],
    "version-history": [
      {
        "count": 1,
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/posts\/1006344\/revisions"
      }
    ],
    "predecessor-version": [
      {
        "id": 1006354,
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/posts\/1006344\/revisions\/1006354"
      }
    ],
    "wp:featuredmedia": [
      {
        "embeddable": true,
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/media\/1006346"
      }
    ],
    "wp:attachment": [
      {
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/media?parent=1006344"
      }
    ],
    "wp:term": [
      {
        "taxonomy": "category",
        "embeddable": true,
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/categories?post=1006344"
      },
      {
        "taxonomy": "post_tag",
        "embeddable": true,
        "href": "https:\/\/sneakernews.com\/wp-json\/wp\/v2\/tags?post=1006344"
      }
    ],
    "curies": [
      {
        "name": "wp",
        "href": "https:\/\/api.w.org\/{rel}",
        "templated": true
      }
    ]
  }
}

Now everything seems to work in my SwiftUI I'm able to extract the data I would like but when I try display the "excerpt" & "content" via

Text("\(data.content)" as String)

my output displays the following:

I've tied the following

struct HTMLText: UIViewRepresentable {

   let html: String
    
    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.loadHTMLString(html, baseURL: nil)
    }
}

but it doesn't seem to work at all,

SneakerNewsData.swift

import Foundation

struct SneakerNewsData:Decodable, Identifiable {
    public var id: Int
    public var link: String
    public var jetpack_featured_media_url: String
    public var title: titleData
    public var excerpt: excerptData
    public var content: contentData
    
    enum CodingKeys: String, CodingKey {
           case id = "id"
           case link = "link"
           case jetpack_featured_media_url = "jetpack_featured_media_url"
           case title = "title"
           case excerpt = "excerpt"
           case content = "content"
        }
}

struct titleData: Decodable {
    var rendered: String

}

struct excerptData: Decodable {
    var rendered: String

}
struct contentData: Decodable {
    var rendered: String

}

Snippet of ContentView.swift

 VStack(alignment: .leading, spacing: 15, content: {
                    Text("\(data.content)" as String)
                   // HTMLText(html: "\(data.content)")       
                })
                .padding()
                .padding(.bottom,lastMinY)
                .background(Color.white)
                .offset(y: scale > 0.4 ? minY : lastMinY)
                .opacity(scale != 0.4 ? 1 : 0)
            }.onAppear {getData()}

is there a way I can remove the ContentData(rendered: from the output and perhaps display the HTML tags that is embedded in the JSON url?

jnpdx · Accepted Answer · 2021-03-08 18:45:09Z

1

The problem is that you're still one level too shallow. You are using data.content, which is of type contentData. What you want is data.content.rendered, which will be the HTML.

Text(data.content.rendered)

or

HTMLText(html: data.content.rendered)

Your HTMLText code already looks good, so that will work.

answered Mar 8, 2021 at 18:45

jnpdx

53.3k7 gold badges91 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zeem Over a year ago

Thank you so much! That worked a treat. Really appreciate it.

jnpdx Over a year ago

No problem. By the way, it is idiomatic in Swift to capitalize type names. So, you may want to change titleData, contentData, etc to capitalized if you want to conform to that trend.

Collectives™ on Stack Overflow

JSON parsing in SwiftUI that includes HTML Tags

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related