Array-Object splice.

Sivoph

Hello. I'm trying to splice an app.store array of three discussion items. Essentially:

var = hello world.
this.array.splice(1 index position, 0 removed, custom var)

Brings up a console error of "e.tags is not defined." I was told that not attaching tags to a discussion will empty the array because is conflicts with the native tags extension.

I was thinking maybe create a new array (shallow?) once the items are "collected" and then insert it into the view, if you know what I'm saying? The objective is to insert custom html between the returned items (mapped items). I hope I make sense?!? Is this possible?

I forgot to add: when I remove items from the array, like so:

this.array.splice(1 index position, 1 item removed)....the entire array disappears one item by one when rendered. Interesting behaviour, but not what I was looking for.

Or, maybe I could just splice the child nodes in the DOM?

luceos

Sivoph we need the actual code, not a snippet of how slice works. It complaints about retrieving tags from an object you see. In Flarum relations should be accessed with () behind it, for instance discussion.tags() instead of discussion.tags.

Sivoph

luceos

Oops..here it is:

import app from 'flarum/forum/app';
import Component from 'flarum/common/Component';
import Link from 'flarum/common/components/Link';
import Avatar from 'flarum/common/helpers/avatar';
import TagsLabel from 'flarum/tags/helpers/tagsLabel';

export default class AddVideoGallery extends Component {
  oninit(vnode) {
    super.oninit(vnode);
    this.megaNoob = [];
    this.loading = true;
  }

  oncreate(vnode) {
    super.oncreate(vnode);

    app.store
      .find("discussions", {

        filter: {

        type: 'discussion',
        q: 'youtube',
        include:'firstPost,user,tags'
        },
        page: {limit: 3},
        sort: '-createdAt',
        })
      .then((results) => {
        this.megaNoob = results;
        this.loading = false;
        m.redraw();
      });
  }

  view() {


    return(
      <div className="cardContainer2">
          <section className="cards-wrapper2">
          {this.megaNoob &&
            this.megaNoob.map((disco)=> {
              return (
               <div className="card-grid-space2">
                 <Link className="card2" href={app.route.discussion(disco)}>

                      {m.trust(

                       disco
                       .firstPost()
                       .contentHtml()
                     
                     )}
                 </Link>
                 <div><a href={app.route.discussion(disco)} style="font-size:18px">Go To Discussion</a></div>

               </div>
              );
           })}
          </section>

 </div>

)
}
}

Okay, so explain what I have attempted:

view() {
var insert = 'Hello, world';
return(
      <div className="cardContainer2">
          <section className="cards-wrapper2">
          {this.megaNoob &&
           this.megaNoob.splice(1,0,insert) &&
            this.megaNoob.map((disco)=> {

and

var insert = 'Hello World';
var thisNoob = Array.from(this.megaNoob);
thisNoob.splice(1,0,insert);
return(
      <div className="cardContainer2">
          <section className="cards-wrapper2">
          {thisNoob &&
            thisNoob.map((disco)=> {

This inserts the text into the array....but the view is blank.

clarkwinkelmann

If you are building the template children from multiple kinds of data, I would recommend building the array of children separately as it will allow working on the array in multiple passes.

Something like this (not tested):

const children = this.discussions.map(discussion => <div className="discussion">{discussion.title()}</div>);

if (children.length > 0) {
    children.splice(1, 0, <div>special entry in between</div>);
}

return <section>{ children }</section>;

If you wanted to insert something every 2 items you could do something like this:

const children = [];

this.discussions.forEach((discussion, index) => {
    children.push(<div className="discussion">{discussion.title()}</div>);

    if (index % 2 === 0 && index !== 0) {
        children.push(<div>special entry in between</div>);
    }
});

return <section>{ children }</section>;

Sivoph

Thank you! Flarum team comes to the rescue...again!