0

アプリに画像を表示する必要があり、JSON 応答から画像を取得し、Javascript を使用してアプリに表示したいと考えています。JSON 応答は次のようになります。

"images":{"full":{"url":"http:\/\/toemlondres.com\/wp-content\/uploads\/2012\/05\/953122.jpg","width":480,"height":720},

私の現在のコードは次のとおりです。

   function load_db(win, section) {
    var data = [];
    db = Titanium.Database.open(config.DB_NAME);
    rows = db.execute("SELECT POST_ID, TITLE, DESCRIPTION, CONTENT, AUTHOR, IMAGE, URL, DATE, SECTION FROM POSTS WHERE SECTION = ? ORDER BY DATE DESC", section);

    var dataArray = [];
    i = 0;

    while (rows.isValidRow()) {

        var remote_image = get_first_image_src(rows.fieldByName('CONTENT'));

        if (remote_image == null) {
            remote_image = config.DEFAULT_IMAGE;
        }

        if (prettyDate(rows.fieldByName('DATE')) == null) {
            pretty_date = date("F j, Y", strtotime(rows.fieldByName('DATE')));
        }
        else {
            pretty_date = prettyDate(rows.fieldByName('DATE'));
        }

        dataArray.push({
            id: rows.fieldByName('POST_ID'),
            title: rows.fieldByName('TITLE'),
            description: rows.fieldByName('DESCRIPTION'),
            content: rows.fieldByName('CONTENT'),
            meta: pretty_date + ' | ' + rows.fieldByName('AUTHOR'),
            image: remote_image,
            url: rows.fieldByName('URL'),
            date: rows.fieldByName('DATE')
        });

        var p = new Object();

        p.id = rows.fieldByName('POST_ID');
        p.title = rows.fieldByName('TITLE');
        p.description = rows.fieldByName('DESCRIPTION');
        p.content = rows.fieldByName('CONTENT');
        p.meta = pretty_date + ' | ' + rows.fieldByName('AUTHOR'), p.image = remote_image, p.url = rows.fieldByName('URL');
        p.date = rows.fieldByName('DATE');
        p.author = {
            nickname: rows.fieldByName('AUTHOR')
        };

        blog_post[p.id] = p;

        rows.next();

        i++;
    };

    rows.close()
    db.close()

    if (section == 'recent_post') {
        Ti.App.fireEvent(
        winRecent.events.SET_BLOG_LIST_RECENT, {
            list_data: dataArray
        });
    }
    else {
        Ti.App.fireEvent(
        win.events.SET_BLOG_LIST, {
            list_data: dataArray
        });
    }
}

function load(win, data, section) {
    load_indicator_start(win);

    db = Titanium.Database.open(config.DB_NAME);
    db.execute("INSERT INTO FETCH_LOG (SECTION, UPDATED_AT) values (?, CURRENT_TIMESTAMP)", section);
    db.close();

    var xhr = Titanium.Network.createHTTPClient();
    xhr.onload = function() {
        var data = [];
        var json = JSON.parse(this.responseText);

        set_blog_post_data(win, json, section);
    };
    xhr.open("GET", data);
    xhr.send();
}

function set_blog_post_data(win, data, section) {
    var p = data.posts || data;
    var valid_title;
    var blog_post_temp = [];

    for (var i = 0; i < p.length; i++) {
        valid_title = p[i].title_plain;
        blog_post[p[i].id] = p[i];

        // save to db, check whenever post_id is exist
        db = Titanium.Database.open(config.DB_NAME);
        row = db.execute("SELECT COUNT(*) FROM POSTS WHERE POST_ID = ? AND SECTION = ?", p[i].id, section);
        count = row.field(0);

        if (count == 0) {
            var remote_image = get_first_image_src(p[i].content);

            if (remote_image == null) {
                remote_image = config.DEFAULT_IMAGE;
            }

            db.execute("INSERT INTO POSTS (POST_ID, TITLE, DESCRIPTION, CONTENT, AUTHOR, IMAGE, URL, DATE, SECTION) VALUES (?,?,?,?,?,?,?,?,?)", p[i].id, valid_title, p[i].excerpt, p[i].content, p[i].author.nickname, remote_image, p[i].url, p[i].date, section);
        }

        db.close();
    }

    load_indicator_stop(win);
    load_db(win, section);
}

function init_db() {
    var db = Titanium.Database.open(config.DB_NAME);
    db.execute('CREATE TABLE IF NOT EXISTS POSTS (POST_ID INTEGER, TITLE VARCHAR(255), DESCRIPTION TEXT, CONTENT TEXT, AUTHOR TEXT, IMAGE VARCHAR(255), URL VARCHAR(255), DATE VARCHAR(255), SECTION VARCHAR(255))');
    db.execute('CREATE TABLE IF NOT EXISTS FETCH_LOG (SECTION VARCHAR(255), UPDATED_AT VARCHAR(255))');
    db.execute('CREATE TABLE IF NOT EXISTS PAGES (PAGE_ID INTEGER, TITLE VARCHAR(255), CONTENT TEXT, AUTHOR TEXT, URL VARCHAR(255), DATE VARCHAR(255), SECTION VARCHAR(255))');
    db.execute('CREATE INDEX IF NOT EXISTS POSTID ON POSTS (POST_ID)');
    db.execute('CREATE INDEX IF NOT EXISTS POSTSECTION ON POSTS (SECTION)');
    db.execute('CREATE INDEX IF NOT EXISTS PAGEID ON PAGES (PAGE_ID)');
    db.execute('CREATE INDEX IF NOT EXISTS PAGESECTION ON POSTS (SECTION)');

    db.close();
}

function get_first_image_src(html) {
    String.prototype.reverse = function() {
        return this.split('').reverse().join('');
    };

    var input = html;
    var matches = input.reverse().match(/(gepj|gpj|fig|gnp)\..+?\/\/:ptth(?=\"\=crs)/g);

    if (Array.isArray(matches)) {
        for (i = 0; i < matches.length; i++) {
            matches[i] = matches[i].reverse();
        }

        return matches[0];
    }
    else {
        return null;
    }
}

しかし、今は変更して、json から直接画像を取得したいと考えています。これどうやってするの？私はコーディングが初めてで、今はこれにこだわっています。

前もって感謝します！

4

1 に答える 1

1

リモート リクエストを作成しているため、xhr を使用する必要があります。Titanium は非同期であるため、リクエストをフェッチするまで待機しません。したがって、コールバックを使用します。

var win = Ti.UI.createWindow();

win.open();

function callback(image) { 
    win.add(image);
}

function remoteRequest(callback) {  
    var json = false;      
    var url = your url;
    var xhr = Ti.Network.createHTTPClient();

    xhr.onload = function(e) {
        json = JSON.parse(this.responseText); 
        var imageView = Ti.UI.createImageView {
            image = json.image;
        }

        callback(imageView);
    };

    xhr.onerror = function(e) {
        alert("error");
        return false;
    };

    xhr.open('GET',url);
    xhr.setRequestHeader("contentType","application/json; charset=utf-8");
    xhr.send(); 
}
于 2012-10-20T06:08:46.817 に答える