Example

This topic uses the data filter in a carousel list of column chart widget to filter videos recommended each day on Bilibili.

1. Log on to the DataV console.
2. On the Projects page, click the project you created.
   If no project is available, create a project first. For more information, see Create a project by using a template.
3. 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.
4. Click the Data tab.
5. 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.
6. Select Initiate Request from Server because cross-original requests are initiated.
7. 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.
8. Select Data Filter and turn on Filter Debugging.
   
9. Click + on the right of Add Filter.
10. 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.
11. 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.