目前我从两个在线存储的JSON文件中提取信息。我的目标是在我的应用程序中显示存储在这些文件中的信息，使用一个用于内容，另一个用于可应用于内容的属性，如背景和字体颜色。
我的主要问题是：
我正在尝试用其他数组填充ObservableArray，然后引用存储在XML文件中每个数组中的信息。一个相当简单的想法，是吗？
内容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>
再次，重申一下：我有一个ObservableArray，它是页面的bindingContext的一部分。这正在填充其他数组，每个数组都填充了我想要应用于我的XML文件的信息。如何使用JavaScript和XML的正确语法引用此信息？
答案 0 :(得分：0)
我认为你实际上需要重新考虑你的设计。 ; - ）
我遇到的第一个问题是myArray [0]最终可能内容，来源或 Feed 。仅仅因为你运行了代码：
loadSources();
loadFeeds();
loadContent();
以同步方式，不保证结果顺序;其中每一个都从ASYNC源加载文件（即在这种情况下为http）;根据这些ASYNC源中的哪一个实际上首先响应其数据，它将首先被放入您的MyArray中。 ;-)
你的第二个问题是
<ListView items="{{ myArray }}"
只会创建三个GridLayout模板;因为根据你的数据他们只有三个myArray项目（即内容，提要，来源）;我非常确定你不想展示三个订单项。
现在问题变成你需要将每个项链接到一个源的源，或者你只想组合所有三种类型并根据它的不同类型显示每种类型的行项目。