How to display received HTML from an API to webview ?

Qjay · 23 May 2016, 11:33

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
    }


   }

raven-worx · Q Qjay 23 May 2016, 11:16

@Qjay
have looked at the docs?!

? Offline · wrote on 23 May 2016, 11:33

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)
    }
}

Qjay · 23 May 2016, 13:44

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)
    }
}

raven-worx · 23 May 2016, 14:30

@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?

? Offline · 23 May 2016, 14:38

@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()
}

Qjay · wrote on 23 May 2016, 14:30

@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 :) .

Qjay · wrote on 23 May 2016, 14:38

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

Thanks for the help