How to display received HTML from an API to webview ?



  • Hey , everyone i am trying to retrieve a page content from an API . the API returns an JSON object . After parsing it i get my HTML and store it in a variable .
    I am able to show that variable's content (HTML) in text , but i want to show it in webview how am i supposed to do it ?

    P.S. don't mind the commented code , those were just for testing :)

    You can see my code here :

    import QtQuick 2.5
    import QtQuick.Window 2.2
    import QtWebKit 3.0
    
    Window {
        visible: true
        width: 1024
        height: 600
    
        MouseArea {
            anchors.fill: parent
            onClicked: {
                parsing();
    
            }
            function parsing() {
            var http = new XMLHttpRequest();
           var json , parse , text ;
    
             http.onreadystatechange = function(){
               if(http.readyState == 4 && http.status == 200)
               { json = http.responseText;
                // alert(json);
                parse = JSON.parse(json);
               // console.log(parse.parse.text["*"]);
                   text = parse.parse.text["*"];
                   console.log(text);
                   label.text = text
               }
             };
                   http.open('GET','http://en.wikitolearn.org/api.php?action=parse&page=Intro%20cryptography&format=json');
                  http.send();
        }
        }
    
        Text {
            id:label
    
            text:  "click me "
            anchors.centerIn: parent
        }
    
    
       }
    

  • Moderators

    @Qjay
    have looked at the docs?!


  • Moderators

    Hi, and welcome to the Qt forum! You can use WebEngineView and its loadHtml() function for this:

    import QtQuick 2.6
    import QtQuick.Window 2.2
    import QtWebEngine 1.2
    
    Window {
        visible: true
        width: 600
        height: 400
    
        WebEngineView {
            id: webEngineView
            anchors.fill: parent
        }
    
        Component.onCompleted: {
            var html = "<html><head><title>nix</title></head><body><h1>Hallo!</h1></body></html>\n"
            webEngineView.loadHtml(html)
        }
    }
    


  • Hey , thanks for the reply :) but all i am getting is blank screen :(

    P.S. i am sure that parsing() returns string since i have checked it using typeof

    here is the code :

    import QtQuick 2.5
    import QtQuick.Window 2.2
    import QtWebEngine 1.1
    import QtWebKit 3.0
    
    
    Window {
        visible: true
        width: 600
        height: 400
    
        function parsing() {
                var http = new XMLHttpRequest();
               var json , parse , text ;
    
                 http.onreadystatechange = function(){
                   if(http.readyState == 4 && http.status == 200)
                   { json = http.responseText;
    
                    parse = JSON.parse(json);
    
                       text = parse.parse.text["*"];
                       console.log(text);
                      return(text);
                   }
                 };
                       http.open('GET','http://en.wikitolearn.org/api.php?action=parse&page=Linear%20Algebra/Sets&format=json');
                      http.send();
            }
    
    
        WebEngineView{
            id: webEngineView
            anchors.fill: parent
        }
    
        Component.onCompleted: {
            var html = parsing()
            webEngineView.loadHtml(html)
        }
    }
    
    

  • Moderators

    @Qjay said:

    P.S. i am sure that parsing() returns string since i have checked it using typeof

    sorry but this means nothing.
    When i set "<html></html>" its a string but it still only displays a blank page...

    What is the content you set exactly?


  • Moderators

    @Qjay Your're doing it wrong. Look:

    import QtQuick 2.5
    import QtQuick.Window 2.2
    import QtWebEngine 1.1
    
    
    Window {
        visible: true
        width: 600
        height: 400
    
        function parsing() {
            var http = new XMLHttpRequest();
            var json , parse , text ;
    
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200)
                { json = http.responseText;
    
                    parse = JSON.parse(json);
    
                    text = parse.parse.text["*"];
                    console.log(text);
                    webEngineView.loadHtml(text);  // <-- LOOK HERE
                    return (text);
                }
            };
            http.open('GET','http://en.wikitolearn.org/api.php?action=parse&page=Linear%20Algebra/Sets&format=json');
            http.send();
        }
    
    
        WebEngineView{
            id: webEngineView
            anchors.fill: parent
        }
    
        Component.onCompleted: parsing()
    }
    


  • @raven-worx the html content is right :) I get itfrom an API . It's just that the API don't give me headers like <html> <link rel =..>

    what i get is from main div tags like : <p> something </p> .

    @raven-worx : next time i will be try to be more elaborate . Thanks for helping

    @Wieland found out i was doing wrong , he corrected it :) .



  • @Wieland Thanks !! it works fine . I will now complete the QMLbook . i am still noob :/

    Thanks for the help


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.