1. ホーム
  2. 質問と答え
  3. ObservableArrayで格納された配列内の情報を参照します。

ObservableArrayで格納された配列内の情報を参照します。

2016-07-05 4 views
0

現在、私はオンラインで保存された2つのJSONファイルから情報を引き出しています。私の目標は、アプリケーションにこれらのファイルに保存されている情報を表示することです。コンテンツには1つを使用し、背景やフォントの色などのコンテンツに適用できる属性を使用します。ObservableArrayで格納された配列内の情報を参照します。

私の主な問題はこれです：

私はXMLファイル内のもののそれぞれの中に保存された情報を他のアレイとObservableArrayを記入して、参照しようとしています。かなりシンプルなアイデアですよね？

コンテンツJSON

{ 
"content": [ 
    { 
    "description": "If you’ve been dreaming about owning a customizable smartwatch, the modular watch that London-based Blocks promised is now available ...", 
    "image": "https:\/\/cdn3.vox-cdn.com\/thumbor\/mOV6mjP_AI50YsQDbQ81444XEB4=\/0x21:2520x1701\/1310x873\/cdn0.vox-cdn.com\/uploads\/chorus_image\/image\/49811865\/hero-bg_2x.0.0.jpg", 
    "created_utc": "1467036570", 
    "title": "The Blocks modular smartwatch can now be pre-ordered", 
    "type": "04", 
    "url": "http:\/\/www.theverge.com\/circuitbreaker\/2016\/6\/9\/11894152\/blocks-modular-smartwatch-pre-order" 
    }, 
    { 
    "description": "At Lenovo TechWorld, we got a glimpse at the Moto Z's developer mod kit and how it can be used to make wacky and weird slip-on attachments.", 
    "image": "http://img.youtube.com/vi/A0YFmMEjXP0/mqdefault.jpg", 
    "created_utc": "1467032545", 
    "title": "Lenovo's Experimental Moto Mods", 
    "feedid": "03", 
    "url": "https://www.youtube.com/watch?v=A0YFmMEjXP0" 
    }, 
    { 
    "description": "", 
    "image": "https://pbs.twimg.com/media/CkmZk8QXIAEKnTF.jpg", 
    "created_utc": "1467035885", 
    "title": "The US just approved six airlines to begin flying to Cuba", 
    "feedid": "02", 
    "url": "http://www.theverge.com/2016/6/10/11903034/us-cuba-airlines-american-southwest-frontier-jetblue" 
    }, 
    { 
    "description": "'Texts from Hillary' photo raised questions about Clinton email habits at State Department", 
    "image": "https://cdn1.vox-cdn.com/thumbor/COJRCv7KVVwj3uO5qt1XHZ5F02Y=/0x82:3010x2089/1280x854/cdn0.vox-cdn.com/uploads/chorus_image/image/49821307/AP_16147060028688.0.0.jpg", 
    "created_utc": "1467036728", 
    "title": "The photo went viral enough to catch the eye of the State Department.", 
    "feedid": "01", 
    "url": "https://www.facebook.com/verge/posts/1116679778368364" 
    }, 
    { 
    "description": "One of the benefits of being (somewhat) bilingual is you get double the internet content. I feel very blessed to be able to enjoy both American internet full of...", 
    "image": "https://cdn2.vox-cdn.com/thumbor/gM8KeNQUzto6fmdot7wfA_q9jSs=/0x0:3000x2000/1310x873/cdn0.vox-cdn.com/uploads/chorus_image/image/49820235/GettyImages-499350590.0.jpg", 
    "created_utc": "1467036669", 
    "title": "If you drop an ant from the top of the Empire State Building, will it die?", 
    "feedid": "04", 
    "url": "http://www.theverge.com/tldr/2016/6/10/11894028/ant-dropped-from-empire-state-building-science-experiment" 
    }, 
    { 
    "description": "Tesla has denied that its cars suffer from suspension defects, suggesting that comments from the US National Highway Traffic Safety Administration (NHTSA) have been misinterpreted.", 
    "image": "https://cdn2.vox-cdn.com/thumbor/IAh-NZAZzH_AwdO2ubVMKlZkB2Y=/187x0:2212x1350/1310x873/cdn0.vox-cdn.com/uploads/chorus_image/image/49819011/model-s-photo-gallery-06.0.0.jpg", 
    "created_utc": "1467042890", 
    "title": "Tesla denies Model S suspension defects, chides journalist in blog post", 
    "feedid": "04", 
    "url": "http://www.theverge.com/circuitbreaker/2016/6/9/11894152/blocks-modular-smartwatch-pre-order" 
    } 
] 
}

ソースと属性JSON

{ 
    "sources": [ 
    { 
     "category":"news", 
     "subject":"technology", 
     "adsenabled":true, 
     "bannerimgsrc":"https://www.camplaurel.com/images/pagegraphics/home/l-header-bg.jpg", 
     "rowbgimgsrc":"https://www.camplaurel.com/images/pagegraphics/home/l-header-bg.jpg", 
     "titlebgcolor":"#ffffff", 
     "row2ndcolor":"#000000", 
     "rowtxtcolor":"#e22805", 
     "rowbgcolor":"#ffffff", 
     "iconsrc": "https://pbs.twimg.com/profile_images/615501837341466624/I4jVBBp-.jpg", 
     "id": 1, 
     "shortname": "verge", 
     "name": "The Verge" 
    }, 
    { 
     "category":"news", 
     "subject":"leisure", 
     "adsenabled":true, 
     "bannerimgsrc":"https://pbs.twimg.com/profile_banners/275686563/1433249898/1500x500", 
     "rowbgimgsrc":"null", 
     "titlebgcolor":"#ece4d1", 
     "row2ndcolor":"#9b4e34", 
     "rowtxtcolor":"#6b2e1e", 
     "rowbgcolor":"#ece4d1", 
     "iconsrc": "https://camo.githubusercontent.com/b13830f5a9baecd3d83ef5cae4d5107d25cdbfbe/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3732313033382f313732383830352f35336532613364382d363262352d313165332d383964312d3934376632373062646430332e706e67", 
     "id": 1, 
     "shortname": "Laurel South", 
     "name": "Camp Laurel South, Mains Premier Sleep Over Camp" 
    } 
    ] 
, 
    "feeds": [ 
    { 
     "hidden": false, 
     "iconsrc": "http://icons.iconarchive.com/icons/danleech/simple/1024/facebook-icon.png", 
     "id": 1, 
     "notistat": "Sound and Text", 
     "sourceid":1, 
     "title": "The Verge Facebook" 
    }, 
    { 
     "hidden": false, 
     "iconsrc": "http://icons.iconarchive.com/icons/danleech/simple/1024/facebook-icon.png", 
     "id": 2, 
     "notistat": "Sound and Text", 
     "sourceid":1, 
     "title": "The Verge Twitter" 
    }, 
    { 
     "hidden": false, 
     "iconsrc": "http://icons.iconarchive.com/icons/danleech/simple/1024/facebook-icon.png", 
     "id": 3, 
     "notistat": "Sound and Text", 
     "sourceid": 1, 
     "title": "The Verge Youtube" 
    }, 
    { 
     "hidden": false, 
     "iconsrc": "http://icons.iconarchive.com/icons/danleech/simple/1024/facebook-icon.png", 
     "id": 4, 
     "notistat": "Sound and Text", 
     "sourceid": 1, 
     "title": "The Verge RSS" 
    } 
    ] 
}

私のJavaScriptファイルはページのBindingContextをなどのBindingContextとして記載されている変数を使用しています。 myArrayはbindingContextの一部であり、JSONのマッピングとローディング機能によって少なくとも理論的にはプッシュされています。

var Observable = require('data/observable').Observable; 
var ObservableArray = require('data/observable-array').ObservableArray; 
var http = require("http"); 
var moment = require('moment'); 
var frameModule = require('ui/frame'); 
var bindingContext = new Observable({ 
    title: "Loading...", 
    myArray: new ObservableArray() 
}); 


function pageLoaded(args) { 
    var page = args.object; 
    page.bindingContext = bindingContext; 

    loadSources(); 
    loadFeeds(); 
    loadContent(); 
} 

function loadContent() { 
    var content = []; 
    http.getJSON("http://www.doesntmatter.com/jsoncontent.php") 
    .then(function (r) { 
     bindingContext.title = 'Notifications Up to Date'; 

     r.content.map(function(item) { 
      item.friendlyTime = moment(item.created_utc * 1000).fromNow(); 
      content.push(item); 

     }); 
     bindingContext.myArray.push(content); 
     console.log("content loaded."); 
    }); 
} 

function loadSources() { 
    var mysources = []; 
    http.getJSON("http://www.secrets.com/jsonsource.php") 
    .then(function (r) { 
     r.sources.map(function(item) { 
      mysources.push(item); 
      console.log(item.name); 
     }); 
    }); 
    bindingContext.myArray.push(mysources); 
    console.log("sources loaded!"); 
    }; 
} 
//LoadSources should add all listed Sources into an array of sources, which is then pushed into the larger "myArray" which allows coloration and other css items to be determined for each object within an array 

function loadFeeds() { 
    var myfeeds = []; 
    http.getJSON("http://www.shhhhhhhh.com/jsonsource.php") 
    .then(function (r) { 
     r.feeds.map(function(item) { 
      myfeeds.push(item); 
     }); 
     bindingContext.myArray.push(myfeeds); 
     console.log("feeds loaded."); 
    }); 
} 
//LoadFeeds should add all listed feeds into an array of feeds, which is also loaded into "myArray", which can then be drawn from to create individual color schemes 

exports.pageLoaded = pageLoaded;

私はとのトラブルの多くは正しくにより両方の言語の多少さび知識にJavaScriptファイルとXMLファイルの両方内のアレイ、サブアレイ、およびそれぞれの内容を参照されたい部分。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"> 

<Page.actionBar> 
    <ActionBar title="Notify"> 
    </ActionBar> 
</Page.actionBar> 

<ListView items="{{ myArray }}" itemTap="itemTap" loadMoreItems="loadMoreItems" class="containter"> 
    <ListView.itemTemplate> 
    <GridLayout rows="21,*,*" columns="90,*" width="*" height="*" > 
    <!-- <Image row="0" col="0" colSpan="1" rowspan="3" src="{{ getItem[2].image }}" /> --> 
    <!-- <Label row="0" col="1" colSpan="1" class="time" text="{{ friendlyTime }}" textAlignment="right" /> --> 
    <!-- <Label row="1" col="1" colSpan="1" class="title" text="{{ content.title }}" margin="1" textWrap="true" /> --> 
    <!-- <Label row="2" col="1" colSpan="1" class="description" text="{{ description }}" textWrap="true" backgroundColor="{{ this is where I would want to reference the contents of the subarrays}}" /> --> 
    </GridLayout> 
    </ListView.itemTemplate> 
</ListView> 
</Page>

もう一度やり直してください：ページのbindingContextの一部であるObservableArrayがあります。これは他の配列で満たされています。これらの配列にはそれぞれ、XMLファイルに適用したい情報が入っています。 JavaScriptとXMLの両方の正しい構文を使用してこの情報を参照するにはどうすればよいですか？

出典

2016-07-05 Will McCloskey

答えて

0

実際にあなたのデザインを再考する必要があると思います。 ;-)私に起こった

まず問題は、myarrayの[0] コンテンツ、またはがフィード源になってしまうことができるということです。あなたがコードを実行したからです：

loadSources(); 
loadFeeds(); 
loadContent();

同期方式では、結果の順序は保証されません。それらの各々は、ASYNCソース（この場合はhttp）からのファイルをロードする。これらのASYNCソースのどれが最初にデータで実際に応答するかに応じて、最初にMyArrayに入力されます。 ;-)

あなたの第二の問題があること <ListView items="{{ myArray }}"

だけあなたのGridLayoutテンプレートの3を作成します。あなたのデータに基づいて3つのmyArrayアイテム（つまり、コンテンツ、フィード、ソース）があるからです。 3つの広告申込情報を表示するだけではないことは間違いありません。

今の質問は、それを入力し、異なるかに基づいて、あなたがフィードをソースにリンクする各項目を必要とするか、またはあなただけのすべての3つのタイプを組み合わせると、行項目の各タイプを表示したいんになります。

出典

2016-07-05 20:13:18 Nathanael

+0

ソースとフィードは、ソースの由来に基づいてコンテンツに適用されるため、異なるソースからの異なるスタイル設定が可能です。私のデザインをどのように変えることができるかについてのアドバイスはありますか？ –

+0

もしそれが私がそれと思われるものなら、すなわち、そのタイプに基づいて3つの完全に異なる外観。それはかなり簡単です。基本的に、あなたのlistviewテンプレートはそのタイプに基づいて異なる出力を持っています。私はコミュニケータアプリでこのテクニックを使用して、「NativeScriptブック」を作成する方法を示して、誰がコンテンツを送信したかによってチャットウィンドウが異なるように見せます。基本的な考え方は、各データ項目に型を付けることです。そのタイプを使用して正しい出力テンプレートを表示します。 – Nathanael

関連する問題

 関連する問題