DataV:Best practices

Procedure

1. Log on to the DataV console.

2. On the My Visualizations page, select the visualization that you created and click Edit.

3. On the Canvas Editor page, click the icon to go to the Assets page. In the search box, enter Column carousel.

4. Select the current component and click the Data icon in the right-side pane.

5. Click Configure Data Source. The Configure Data Source page appears.

6. In the Data Source Type section, select API from the drop-down list and enter the URL of Site B (https://www.bilibili.com/index/recommend.json ).

7. Select Server Proxy Request. This data request is in cross-domain mode.

8. Click Preview Results to view the returned results of the URL source data of Station B.

   In the preview box, a JSON object is returned. However, the carousel list needs to display a list of objects, and each object needs to contain the value and content fields. Therefore, you need to continue to perform the following steps to configure the data filter and convert the data structure.

9. Select Data Filter and turn on Enable Filter Debugging.

   

10. Click the icon next to Add Filter to add a filter.

11. Edit the code content of the filter and 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
      };
    });

    After the code in the filter is edited, you can see the list of data required by the converted widget. The content is displayed in the value and content fields.

12. After the configuration and test are successful, click Save and refresh the Data Response Result page to view the daily recommendation data of Site B.

    Note

    You can also click the icon in the Data Response section to view the response results.