Alpine: How to set data after fetching

[r94ever]

Hi all,

I now have an issue which could not resolve, so I post here to look for some helps.

I have a comment block which list the latest comments:

<div x-data="commentData()" x-init="getComments()">
  <ul>
    <template x-for="comment in comments" :key="comment.id>
      <li>
        <div x-text="comment.content></div>
      </li>
    </template>
  </ul>
</div>

and the script which defines the Alpine properties and methods:

<script>
function commentData() {
  return {
    comments: [],
    init() {
      this.getComments()
    },
    getComments() {
        fetch ('ajax')
          .then(response => response.json())
          .then(data => this.comments = data.comments)
    }
  }
}
</script>

As expect, the code above will fetch the latest comments from server then loop to template block, but it didn't. When check the console log after assign this.comments to data.comment, this showed:

https://imgur.com/a/Hp8yoRE

I think this is a simple task but I could not make it be done. So please show me where I was wrong.

Thanks,

[HugoDF]

Pretty sure that script could look something like (added a return and removed init since it's not usef

<script>
function commentData() {
  return {
    comments: [],
    getComments() {
      fetch ('ajax')
        .then(response => response.json())
        .then(data => this.comments = data.comments)
    }
  }
}
</script>

There's nothing obviously wrong with it that I can spot, could you create a codepen that reproduces this behaviour?

[r94ever]

@HugoDF thanks for your reply, this is my code pen: https://codepen.io/r94ever/pen/MWaEZwX

If I use the local JSON data, it will work, but it don't work if I fetch data from server.

[SimoTod]

You missed the x-init call in your second codepen.
https://codepen.io/SimoTod/pen/RwWLvPj

[r94ever]

@SimoTod I forgot to call x-init, but why it worked? I dont't understand why it didn't on my local :(

[r94ever]

@SimoTod can you explain for me what this is when I console.log the comments property after assign data: https://imgur.com/a/Hp8yoRE

[SimoTod]

@r94ever I've just noticed that, in your first post, you wrote fetch ('ajax').
Is it a local URL? Are you sure it's returning the expected json?

The console.log is okay. After you assign literal objects and literal arrays to properties in the Alpine context, they become proxy objects. The originalTarget property should contain the object you assigned.

[xsonic]

The originalTarget property should contain the object you assigned.

Can you elaborate on this, please? Never worked with proxies before.

[SimoTod]

in the screenshot posted by r94ever, there is a property called originalTarget which contains the original object we set on the property. Note, this is true for the specific implementation used by Alpine, it's not a generic Proxy thing. For more details you can have a look at the Salesforce membrane (https://github.com/salesforce/observable-membrane) which is the library used by Alpine.

Generally speaking, Proxies are special transparent objects, so, from the outside, it's like reading/writing properties or calling functions on the real object.

[xsonic]

Thanks a lot for clarifying and for the link. Interesting library.

I was confused as the console didn't output the real thing, so I didn't notice that I can just access it like any other object.

If somebody has the same issue, here is a simple helper function to log these proxies to the developer console:

proxyLog(proxy) {
    console.log(JSON.parse(JSON.stringify(proxy)))
}

[SimoTod]

@xsonic there's also a community devtool extension to inspect Alpine that you may find useful
https://github.com/Te7a-Houdini/alpinejs-devtools/blob/master/README.md

[r94ever]

Hi @HugoDF and @SimoTod

Now I've already resolve my issue, since that was my stupid. In fact, beside the comments property, I also have a comment property, which is the x-model of comment's content. Then in loop, I use comment in comments. And as you guess, nothing displayed since the comment model still have nothing lol

Thank you for your support!

[r94ever]

Ah sorry, one more question. How to append or prepend an item to the current array. I've used push and unshift but didn't lucky

[SimoTod]

@r94ever They should work.
Do you have an example i can look at
?

[r94ever]

@SimoTod oh so sorry it's still my silly. Very sorry for bothering you. I close issue now :haircut:

[SimoTod]

No worries 👍