This topic uses the data filter in a carousel list of column chart widget to filter videos recommended each day on Bilibili.
Prerequisites
You must add a
carousel list of column chart widget in the project editor. For more information, see
Add a widget.
Procedure
- Log on to the DataV console.
- On the Projects page, click the project you created.
- On the editor, click a widget in the Layer panel or on the canvas.
Notice Before you search for a widget, make sure that you have added the widget to your project.
For more information, see
Add a widget.
- Click the Data tab.
- On the right of Data Source, click Set. In the Set Data Source pane, set Data Source Type to API. In the data source edit box, enter the URL of Bilibili
https://www.bilibili.com/index/recommend.json
.
- Select Initiate Request from Server because cross-original requests are initiated.
- Click Preview Data Response to view the data returned by Bilibili.

In the preview box, a JSON object is returned. However, the data in the
carousel list of column chart is an object list. Each object must contain the
content and
value fields. You can proceed with the following steps to convert the data format by using
a data filter.
- Select Data Filter and turn on Filter Debugging.
- Click + on the right of Add Filter.
- Edit the code in the filter. Then, click Test to view the filter result.
The trigger condition of the filter in the preceding figure is as follows:
return data.list.map(item => {
return {
value: item.author,
content: item.description
};
});
The following figure shows the data that is converted by the filter. The data contains
the
value and
content fields.

- After you edit and test the filter, click Save. Then, click the Refresh icon next to Data Response Result to view videos recommended each day on Bilibili.