Parse data from table (HTML) using AngleSharp?

Question

Need to parse site play music and take song data from playlist

Having this table (ru version):

<tr class="song-row " data-id="ef713e30-ea6c-377d-a1a6-bc55ef61169c" data-song-type="7" data-subscription-links="true" data-index="0"><td data-col="index"><span class="column-content">1<button aria-label="Воспроизвести: HUMBLE." data-id="play" class="aria-play-button"></button></span></td><td data-col="title"><div class="title-right-items"><iron-icon icon="av:explicit" role="img" aria-label="Не предназначено для детей" title="Не предназначено для детей" class="x-scope iron-icon-0"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h4v2h-4v2h4v2H9V7h6v2z" class="style-scope iron-icon"></path></g></svg>

Here, for example - the name of the song

<span class="column-content tooltip"><img src="https://lh3.googleusercontent.com/UVqWaml2fkVCgsErJIZBLeSn6LlOCI1t_W68-1HABS8dos9fWNn-4cGkboaKf-5Ro_YhthMx=s60-e100-c" alt="">HUMBLE.</span>

How can I get to the data, such as the name of the song, the artist, and so on?

Answer 1

The AngleSharp README got a quite similar example (see https://github.com/AngleSharp/AngleSharp.Samples/blob/master/AngleSharp.Samples.Demos/Snippets/BigBang.cs):

// Setup the configuration to support document loading
var config = Configuration.Default.WithDefaultLoader();
// Load the names of all The Big Bang Theory episodes from Wikipedia
var address = "http://en.wikipedia.org/wiki/List_of_The_Big_Bang_Theory_episodes";
// Asynchronously get the document
var document = await BrowsingContext.New(config).OpenAsync(address);
// This CSS selector gets the desired content
var cellSelector = "tr.vevent td:nth-child(3)";
// Perform the query to get all cells with the content
var cells = document.QuerySelectorAll(cellSelector);
// We are only interested in the text - select it with LINQ
var titles = cells.Select(m => m.TextContent);

Since you did not post your configuration / AngleSharp-related methods I assume you are quite sure they work anyway... So I will omit them for simplicity.

Now in your case this may translate to:

var rows = document.QuerySelectorAll("tr.song-row");
var songInfos = rows.Select(row => new {
    Title = row.QuerySelector(".column-content.tooltip")?.TextContent,
});

Note: The song title example that you brought does seem very generic; I do not see anything related to a song title. As such I assume you will need to select a particular column (e.g., 5th column) from the given row. In the example above I just used the selector for the element you've shown.

HTH!