How to render json result from api request using Binding.scala

Question

I tried the following code to render json into dom but failed

       <div class="row">
        {val result = FutureBinding(ApiHomeProjectsGet.request())
      result.bind match {
        case None => <div>Loading...</div>
        case Some(Success(ApiHomeProjectsGetResponse200(projects))) =>     {
          for (project <- projects.items) yield <p> {project.title} </p>
        }
        case e => <div>Error</div>
      }}
      </div>

projects is defined as a case class

case class Projects(items: ArrayBuffer[Project])

the compiler reports error:

overloaded method value domBindingSeq with alternatives:
[error]   (text: String)com.thoughtworks.binding.Binding.Constants[org.scalajs.dom.raw.Text] <and>
[error]   (node: org.scalajs.dom.raw.Node)com.thoughtworks.binding.Binding.Constants[org.scalajs.dom.raw.Node] <and>
[error]   (seq: Seq[org.scalajs.dom.raw.Node])com.thoughtworks.binding.Binding.Constants[org.scalajs.dom.raw.Node] <and>
[error]   (bindingSeq: com.thoughtworks.binding.Binding.BindingSeq[org.scalajs.dom.raw.Node])com.thoughtworks.binding.Binding.BindingSeq[org.scalajs.dom.raw.Node]
[error]  cannot be applied to (Object)
[error]           <div class="row">
[error]            ^
[error] one error found

How can I render json data from api request to dom with the for(...) yield pattern?

The best solution

     case Some(Success(ApiHomeProjectsGetResponse200(projects))) =>
        <div class="row">
          {Constants[Project](projects.items:_*).map(item => <p> {item.title} </p>)}
        </div>

OlivierBlanvillain · Accepted Answer · 2017-03-20 15:25:54Z

1

According to your definition of Projects, projects.items is of type ArrayBuffer[Project]. Your for comprehension desugars to map, the result is therefore of type ArrayBuffer[dom.raw.Node].

In your pattern matching expression you are mixing dom.raw.Node and ArrayBuffer[dom.raw.Node], the least upper bound of these two types is Object which is why it pops up in the error message.

One way to solve this problem would be to return a dom.raw.Node in every branch of the pattern matching, for example:

case ... =>
  <div>
    (for (project <- projects.items) yield <p> {project.title} </p>).toSeq
  </div>

answered Mar 20, 2017 at 15:25

OlivierBlanvillain

7,7784 gold badges34 silver badges52 bronze badges

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

2 Comments

hailong Over a year ago

I try to use the following code ` case Some(Success(ApiHomeProjectsGetResponse200(projects))) => <div> (for (project <- projects.items) yield <p>{project.title}</p>).toSeq </div>`

hailong Over a year ago

but still get errors: in XML literal: name expected, but char '-' cannot start a name [error] (for (project <- projects.items) yield <p>{project.title}</p>).toSeq

hailong · Accepted Answer · 2017-03-21 02:31:30Z

0

For now, I can use a render function to solve this problem

          case Some(Success(ApiHomeProjectsGetResponse200(projects))) =>
          val projectsBinding = Vars[Project](projects.items:_*)
          <div>
             { renderProjectPanel(projectsBinding).bind}
          </div>

          @dom def renderProjectPanel(items: Vars[Project]) = {
              for (project <- items) yield <p>{project.title}</p>
          }

even though this needs to add some more code, but it works

Hope someone will give a simpler solution

answered Mar 21, 2017 at 2:31

hailong

512 bronze badges

1 Comment

Yang Bo Over a year ago

Vars should be Constants, see stackoverflow.com/questions/42498968/…

Collectives™ on Stack Overflow

How to render json result from api request using Binding.scala

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related