Iron-ajax 无法读取 json 文件
Iron-ajax can't read json file
我在第一次查看时使用的是使用 Polymer Starter Kit 初始化的 Polymer 应用程序。我想读取 <paper-listbox>
中的 JSON 文件,并为每个数组元素创建一个 <paper-item>
:
这是我的 <paper-listbox>
:
的代码
<paper-listbox>
<iron-ajax auto url="/listActivities.json" handle-as="json" last-response="{{activities}}" id="ajaxLoader"></iron-ajax>
<template is="dom-repeat" items="{{activities}}">
<paper-icon-item>
<iron-icon icon="star" item-icon></iron-icon>
<paper-item-body two-line>
<div><span>{{item.label}}</span></div>
<div secondary>Unit game number : <span>{{item.unitGames.length}}</span></div>
</paper-item-body>
</paper-icon-item>
</template>
</paper-listbox>
这是我的 JSON 文件:
[
{
"_id":"58dbcb30dc0b2a01553c59a9",
"staticMedia":"58d52d626575de2207193fac",
"label":"myfirstgame",
"__v":0,
"unitGames":["58dbcaa5dc0b2a01553c59a8"]
},
{
"_id":"58dd1d3edc0b2a01553c59af",
"staticMedia":"58d12091241b0868bfb29a3b",
"label":"Jeu à l'IUT",
"__v":0,
"unitGames":["58dd1b61dc0b2a01553c59ab"]
},
{
"_id":"58dd23e14704644b4ab307e6",
"staticMedia":"58d12091241b0868bfb29a3b",
"label":"IUT",
"__v":0,
"unitGames":["58dd23ba4704644b4ab307e4"]
},
{
"_id":"58e008d67d08713351f0af13",
"staticMedia":"58d52d626575de2207193fac",
"label":"Test POI clue",
"__v":0,
"unitGames":["58e008b97d08713351f0af12"]
},
{
"_id":"58e10d2d7d08713351f0af22",
"label":"Prunus MLG",
"__v":0,
"unitGames":["58e10d167d08713351f0af21"]
}
]
该应用不需要我的 JSON 文件的每个部分(只需要 label
和 unitGames
)。当我 运行 应用程序时,它在视图标题后什么也不显示。我该如何解决这个问题?
您可能缺少一个或多个 HTML 组件所需的导入:
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-item/paper-icon-item.html">
<link rel="import" href="../paper-item/paper-item-body.html">
通过上面的导入和你的 listActivities.json
,这个 plunker
demo 产生:
问题来自我的 JSON 文件的 url 路径,不需要文件名前的“/”,因为该文件与我的 - view1.html.
我在第一次查看时使用的是使用 Polymer Starter Kit 初始化的 Polymer 应用程序。我想读取 <paper-listbox>
中的 JSON 文件,并为每个数组元素创建一个 <paper-item>
:
这是我的 <paper-listbox>
:
<paper-listbox>
<iron-ajax auto url="/listActivities.json" handle-as="json" last-response="{{activities}}" id="ajaxLoader"></iron-ajax>
<template is="dom-repeat" items="{{activities}}">
<paper-icon-item>
<iron-icon icon="star" item-icon></iron-icon>
<paper-item-body two-line>
<div><span>{{item.label}}</span></div>
<div secondary>Unit game number : <span>{{item.unitGames.length}}</span></div>
</paper-item-body>
</paper-icon-item>
</template>
</paper-listbox>
这是我的 JSON 文件:
[
{
"_id":"58dbcb30dc0b2a01553c59a9",
"staticMedia":"58d52d626575de2207193fac",
"label":"myfirstgame",
"__v":0,
"unitGames":["58dbcaa5dc0b2a01553c59a8"]
},
{
"_id":"58dd1d3edc0b2a01553c59af",
"staticMedia":"58d12091241b0868bfb29a3b",
"label":"Jeu à l'IUT",
"__v":0,
"unitGames":["58dd1b61dc0b2a01553c59ab"]
},
{
"_id":"58dd23e14704644b4ab307e6",
"staticMedia":"58d12091241b0868bfb29a3b",
"label":"IUT",
"__v":0,
"unitGames":["58dd23ba4704644b4ab307e4"]
},
{
"_id":"58e008d67d08713351f0af13",
"staticMedia":"58d52d626575de2207193fac",
"label":"Test POI clue",
"__v":0,
"unitGames":["58e008b97d08713351f0af12"]
},
{
"_id":"58e10d2d7d08713351f0af22",
"label":"Prunus MLG",
"__v":0,
"unitGames":["58e10d167d08713351f0af21"]
}
]
该应用不需要我的 JSON 文件的每个部分(只需要 label
和 unitGames
)。当我 运行 应用程序时,它在视图标题后什么也不显示。我该如何解决这个问题?
您可能缺少一个或多个 HTML 组件所需的导入:
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-item/paper-icon-item.html">
<link rel="import" href="../paper-item/paper-item-body.html">
通过上面的导入和你的 listActivities.json
,这个 plunker
demo 产生:
问题来自我的 JSON 文件的 url 路径,不需要文件名前的“/”,因为该文件与我的 - view1.html.