-2

I'm trying to program an API for discord and I need to retrieve two pieces of information out of the HTML code of the web page https://myanimelist.net/character/214 (and other similar pages with URLs of the form https://myanimelist.net/character/N for integers N), specifically the URL of the Character Picture (in this case https://cdn.myanimelist.net/images/characters/14/54554.jpg) and the name of the character (in this case Youji Kudou). Afterwards I need to save those two pieces of information to JSON.

I am using HTMLAgilityPack for this, yet I can't quite see through it. The following is my first attempt:

public static void Main()
{ 
    var html = "https://myanimelist.net/character/214";
    HtmlWeb web = new HtmlWeb();
    var htmlDoc = web.Load(html);
    var htmlNodes = htmlDoc.DocumentNode.SelectNodes("//body");

    foreach (var node in htmlNodes.Descendants("tr/td/div/a/img"))
    {
        Console.WriteLine(node.InnerHtml);
    }
}

Unfortunately, this produces no output. If I followed the path correctly (which is probably the first mistake) it should be "tr/td/div/a/img". I get no errors, it runs, yet I get no output.

My second attempt is:

public static void Main()
{
    var html = "https://myanimelist.net/character/214";
    HtmlWeb web = new HtmlWeb();
    var htmlDoc = web.Load(html);
    var htmlNodes = htmlDoc.DocumentNode.SelectNodes("//body");
    HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
    var script = htmlDoc.DocumentNode.Descendants()
                     .Where(n => n.Name == "tr/td/a/img")
                     .First().InnerText;

    // Return the data of spect and stringify it into a proper JSON object
    var engine = new Jurassic.ScriptEngine();
    var result = engine.Evaluate("(function() { " + script + " return src; })()");
    var json = JSONObject.Stringify(engine, result);

    Console.WriteLine(json);
    Console.ReadKey();
}

But this also doesn't work.

How can I extract the required information?

EDIT:

So, I've come quite further now, and I've found a solution to finding the link. It was rather simple. But now I'm stuck with finding the name of the character. The website is structured the same on every other link there is (changing the last number) so, I want to find many different ones via for loop. Here's how I tried to do it:

for (int i = 1; i <= 1000; i++)
            {
                HtmlWeb web = new HtmlWeb();
                var html = "https://myanimelist.net/character/" + i;
                var htmlDoc = web.Load(html);
                foreach (var item in htmlDoc.DocumentNode.SelectNodes("//*[@]"))
                {
                    string n;
                    n = item.GetAttributeValue("src", "");
                    foreach (var item2 in htmlDoc.DocumentNode.SelectNodes("//*[@src and @alt='" + n + "']"))
                    {
                        Console.WriteLine(item2.GetAttributeValue("src", ""));
                    }
                }


            }

in the first foreach I would try to search for the name, which is concluded always at the same position (e.g http://prntscr.com/o1uo3c and http://prntscr.com/o1uo91 and to be specific: http://prntscr.com/o1xzbk) but I haven't found out how yet. Since the structure in the HTML doesn't have any body type I can follow up with. The second foreach loop is to search for the URL which works by now and the n should give me the name, so I can figure it out for each different character.

Blake169
  • 23
  • 3
  • Once you have extracted your data to c# classes, see [How to write a JSON file in C#?](https://stackoverflow.com/q/16921652) to serialize them to a JSON file. – dbc Jun 13 '19 at 20:51
  • @dbc Thank you! I will save it! – Blake169 Jun 13 '19 at 22:12

2 Answers2

1

I was able to extract the character name and image from https://myanimelist.net/character/214 using the following method:

public static CharacterData ExtractCharacterNameAndImage(string url)
{
    //Use the following if you are OK with hardcoding the structure of <div> elements.
    //var tableXpath             = "/html/body/div[1]/div[3]/div[3]/div[2]/table"; 
    //Use the following if you are OK with hardcoding the fact that the relevant table comes first.
    var tableXpath             = "/html/body//table"; 
    var nameXpath              = "tr/td[2]/div[4]";
    var imageXpath             = "tr/td[1]/div[1]/a/img";

    var htmlDoc = new HtmlWeb().Load(url);

    var table = htmlDoc.DocumentNode.SelectNodes(tableXpath).First();

    var name = table.SelectNodes(nameXpath).Select(n => n.GetDirectInnerText().Trim()).SingleOrDefault();
    var imageUrl = table.SelectNodes(imageXpath).Select(n => n.GetAttributeValue("src", "")).SingleOrDefault();

    return new CharacterData { Name = name, ImageUrl = imageUrl, Url = url };
}

Where CharacterData is defined as follows:

public class CharacterData
{
    public string Name { get; set; }
    public string ImageUrl { get; set; }
    public string Url { get; set; }
}

Afterwards, the character data can be serialized to JSON using any of the tools from How to write a JSON file in C#?, e.g. :

var url = "https://myanimelist.net/character/214";

var data = ExtractCharacterNameAndImage(url);
var json = JsonConvert.SerializeObject(data, Formatting.Indented);

Console.WriteLine(json);

Which outputs

{
  "Name": "Youji Kudou",
  "ImageUrl": "https://cdn.myanimelist.net/images/characters/14/54554.jpg",
  "Url": "https://myanimelist.net/character/214"
}

If you would prefer the Name to include the Japanese in parenthesis, replace GetDirectInnerText() with just InnerText, which results in:

{
  "Name": "Youji Kudou (工藤耀爾)",
  "ImageUrl": "https://cdn.myanimelist.net/images/characters/14/54554.jpg",
  "Url": "https://myanimelist.net/character/214"
}

Alternatively, if you prefer you could pull the character name from the document title:

var title = string.Concat(htmlDoc.DocumentNode.SelectNodes("/html/head/title").Select(n => n.InnerText.Trim()));
var index = title.IndexOf("- MyAnimeList.net");
if (index >= 0)
    title = title.Substring(0, index).Trim();

How did I determine the correct XPath strings?

Firstly, using Firefox 66, I opened the debugger and loaded https://myanimelist.net/character/214 in the window with the debugging tools visible.

Next, following the instructions from How to find xpath of an element in firefox inspector, I selected the Youji Kudou (工藤耀爾) node and copied its XPath, which turned out to be:

/html/body/div[1]/div[3]/div[3]/div[2]/table/tbody/tr/td[2]/div[4]

I then tried to select this node using SelectNodes()... and got a null result. But why? To determine this I created a debugging routine that would break the path into successively longer portions and determine where the failure occurs:

static void TestSelect(HtmlDocument htmlDoc, string xpath)
{
    Console.WriteLine("\nInput path: " + xpath);
    var splitPath = xpath.Split('/');
    for (int i = 2; i <= splitPath.Length; i++)
    {
        if (splitPath[i-1] == "")
            continue;
        var thisPath = string.Join("/", splitPath, 0, i);
        Console.Write("Testing \"{0}\": ", thisPath);
        var result = htmlDoc.DocumentNode.SelectNodes(thisPath);
        Console.WriteLine("result count = {0}", result == null ? "null" : result.Count.ToString());
    }
}

This output the following:

Input path: /html/body/div[1]/div[3]/div[3]/div[2]/table/tbody/tr/td[2]/div[4]
Testing "/html": result count = 1
Testing "/html/body": result count = 1
Testing "/html/body/div[1]": result count = 1
Testing "/html/body/div[1]/div[3]": result count = 1
Testing "/html/body/div[1]/div[3]/div[3]": result count = 1
Testing "/html/body/div[1]/div[3]/div[3]/div[2]": result count = 1
Testing "/html/body/div[1]/div[3]/div[3]/div[2]/table": result count = 1
Testing "/html/body/div[1]/div[3]/div[3]/div[2]/table/tbody": result count = null
Testing "/html/body/div[1]/div[3]/div[3]/div[2]/table/tbody/tr": result count = null
Testing "/html/body/div[1]/div[3]/div[3]/div[2]/table/tbody/tr/td[2]": result count = null
Testing "/html/body/div[1]/div[3]/div[3]/div[2]/table/tbody/tr/td[2]/div[4]": result count = null

As you can see, something goes wrong selecting the <tbody> path element. Manual inspection of the InnerHtml returned by selecting /html/body/div[1]/div[3]/div[3]/div[2]/table revealed that, for some reason, the server is not including the <tbody> tag when returning HTML to the HtmlWeb object -- possibly due to some difference in request header(s) provided by Firefox vs HtmlWeb. Once I omitted the tbody path element I was able to query for the character name successfully using:

/html/body/div[1]/div[3]/div[3]/div[2]/table/tr/td[2]/div[4]

A similar process provided the following working path for the image:

/html/body/div[1]/div[3]/div[3]/div[2]/table/tr/td[1]/div[1]/a/img

Since the two queries are finding contents in the same <table>, in my final code I selected the table only once in a separate step, and removed some of the hardcoding as to the specific nesting of <div> elements.

Demo fiddle here.

dbc
  • 104,963
  • 20
  • 228
  • 340
  • 1
    I'm honestly speechless.. I thank you so much! I would've never come to this conclusion and I'll try to comprehend all this what you did and put it to good use... I do not know how I should thank you for the time you used and the effort you made, but I am very thankful.!! – Blake169 Jun 14 '19 at 23:33
  • I've adapted the post and made a final answer where I show the final result! All thanks to your help... I'm very grateful like I said a thousand times :)) – Blake169 Jun 15 '19 at 00:50
0

Alright, to finnish it up, I've rounded the Code, gratefully assisted by dbc, and implemented nearly completly into the project. Just if someone in later days maybe has a identical question, here they go. This outputs out of a defined number all the character names, links and images and writes it into a JSON file and could be adapted for other websites.

using System;
using System.Linq;
using Newtonsoft.Json;
using HtmlAgilityPack;
using System.IO;

namespace SearchingHTML
{
    public class CharacterData
    {
        public string Name { get; set; }
        public string ImageUrl { get; set; }
        public string Url { get; set; }
    }
    public class Program
    {
        public static CharacterData ExtractCharacterNameAndImage(string url)
        {
            var tableXpath = "/html/body//table";
            var nameXpath = "tr/td[2]/div[4]";
            var imageXpath = "tr/td[1]/div[1]/a/img";

            var htmlDoc = new HtmlWeb().Load(url);
            var table = htmlDoc.DocumentNode.SelectNodes(tableXpath).First();
            var name = table.SelectNodes(nameXpath).Select(n => n.GetDirectInnerText().Trim()).SingleOrDefault();
            var imageUrl = table.SelectNodes(imageXpath).Select(n => n.GetAttributeValue("src", "")).SingleOrDefault();

            return new CharacterData { Name = name, ImageUrl = imageUrl, Url = url };
        }
        public static void Main()
        {
            int max = 10000;
            string fileName = @"C:\Users\path of your file.json";

            Console.WriteLine("Environment version: " + Environment.Version);
            Console.WriteLine("Json.NET version: " + typeof(JsonSerializer).Assembly.FullName);
            Console.WriteLine("HtmlAgilityPack version: " + typeof(HtmlDocument).Assembly.FullName);
            Console.WriteLine();

            for (int i = 6; i <= max; i++)
            {
                try
                {
                    var url = "https://myanimelist.net/character/" + i;
                    var htmlDoc = new HtmlWeb().Load(url);
                    var data = ExtractCharacterNameAndImage(url);
                    var json = JsonConvert.SerializeObject(data, Formatting.Indented);
                    Console.WriteLine(json);
                    TextWriter tsw = new StreamWriter(fileName, true);
                    tsw.WriteLine(json);
                    tsw.Close();
                } catch (Exception ex) { }
            }

        }
    }
}

/*******************************************************************************************************************************
 ****************************************************IF TESTING IS REQUIERED****************************************************
 *******************************************************************************************************************************
 * 
 * static void TestSelect(HtmlDocument htmlDoc, string xpath)

        Console.WriteLine("\nInput path: " + xpath);
        var splitPath = xpath.Split('/');
        for (int i = 2; i <= splitPath.Length; i++)
        {
            if (splitPath[i - 1] == "")
                continue;
            var thisPath = string.Join("/", splitPath, 0, i);
            Console.Write("Testing \"{0}\": ", thisPath);
            var result = htmlDoc.DocumentNode.SelectNodes(thisPath);
            Console.WriteLine("result count = {0}", result == null ? "null" : result.Count.ToString());
        }
    }

  *******************************************************************************************************************************
  *********************************************FOR TESTING ENTER THIS INTO MAIN CLASS********************************************
  *******************************************************************************************************************************
  * 
  *     var url2 = "https://myanimelist.net/character/256";
        var data2 = ExtractCharacterNameAndImage(url2);
        var json2 = JsonConvert.SerializeObject(data2, Formatting.Indented);

        Console.WriteLine(json2);



        var nameXpathFromFirefox = "/html/body/div[1]/div[3]/div[3]/div[2]/table/tbody/tr/td[2]/div[4]";
        var imageXpathFromFirefox = "/html/body/div[1]/div[3]/div[3]/div[2]/table/tbody/tr/td[1]/div[1]/a/img";
        TestSelect(htmlDoc, nameXpathFromFirefox);
        TestSelect(htmlDoc, imageXpathFromFirefox);
        var nameXpathFromFirefoxFixed = "/html/body/div[1]/div[3]/div[3]/div[2]/table/tr/td[2]/div[4]";
        var imageXpathFromFirefoxFixed = "/html/body/div[1]/div[3]/div[3]/div[2]/table/tr/td[1]/div[1]/a/img";
        TestSelect(htmlDoc, nameXpathFromFirefoxFixed);
        TestSelect(htmlDoc, imageXpathFromFirefoxFixed);

  *******************************************************************************************************************************
  *******************************************************************************************************************************
  *******************************************************************************************************************************
  */
Blake169
  • 23
  • 3