How to plot as may outputs as elements of a returned array?

@MikeP wrote:

I want to create an interactive news feed as one may have in twitter. To that extent I was thinking about creating a multioutput callback. However, by definition, at the very beginning I don’t have any posts, so any container to replace.

Basically, I have a search engine that returns an array ‘articles’ containing article with headline, body and a few more things.

So I would like to give you a little more Twitter news feed design. I’d also like to be able to click on it and expand them.

Here is the search engine callback:

from dash.dependencies import Input, Output, State
import dash_core_components as dcc

import pickle

from …server import app

@app.callback(
    # Output('output-container-button', 'children'),
    Output('articles', 'children'),
    [Input('button', 'n_clicks')],
    [State('input-box', 'value')])
def update_search(n_clicks, value):
    f = pickle.load(open("dashboard/data-mm/google-nlu.p", "rb"))
    # let's filter f according to value
    articles = []
    for article in f:
    	if value in article['headline']:
    		# We want to print this
    		articles.append(article)
    print(articles[0])
    return dcc.Markdown([f"{article['headline']}\n" for article in articles])

And here is my app.py:

def article_search():
    return html.Div(
        [
            html.Div(dcc.Input(id='input-box', type='text')),
            html.Button('Submit', id='button'),
            html.Div(id='output-container-button',
                     children='Enter a value and press submit'),
            html.H6(
                id='articles',
                children='Matching articles',
            )
        ]

app.layout = html.Div(
    [
        dcc.Tabs(
            [
                dcc.Tab(
                    label='Search article',
                    value= 'search',
                    children = article_search()
                )
            ]
        )
    ]
)

And it returns me the headlines.

So far it looks like this:

Each black line is a article['headline'] . Here is article[0] :

{'headline': this is the headline', 'body': 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 'sentiment': -0.4000000059604645, 'topics': {'/Finance': 0.6600000262260437}, 'topics_kw': ['Politics', 'The financial sector', 'Media', 'Society', 'Social projects'], 'date': datetime.datetime(2019, 9, 25, 0, 0)}

Posts: 1

Participants: 1

Read full topic