2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。如何读取一个本地Json文件并查询该文件展示其内容
我前一段时间在我的博客里写了一篇文章&如何在QML应用中读写文件&，那篇文章是介绍如何使用C++来读取文件的。那种方法是一个比较通用的方法。但是对于有些应用来说，我们可以通过配置JSON来创建我们的UI，或者对不同的平台进行配置，而不用写一个单独的设置文件来做这件事。那么我们如何不需要通过C++的方法来读取Json文件呢？
我们可以使用我们的SDK创建一个最基本的QML应用。为了能够读取Json文件，我们创建一个叫做&jsonparser.js&的文件：
/* Based on:
* JSONListModel - a QML ListModel with JSON and JSONPath support
* Copyright (c) 2012 Romain Pokrzywka (KDAB) ()
* Licensed under the MIT licence
* (http://opensource.org/licenses/mit-license.php)
* /s3u/JSONPath
//Qt.include(&jsonpath.js&)
function readJsonFile(source, callback) {
var xhr = new XMLHttpR
xhr.open(&GET&, source);
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var doc = xhr.responseT
console.log(&JSON: & + json)
var json = JSON.parse(doc);
callback.update(json);
xhr.send();
我们通过XMLHttpRequest来完成本地文件的请求工作，并使用callback中的update来传人到QML文件中进行解析。为了能够更加方便地解析我们得到的Json文件，我们使用了
里提供的库。我们可以把&jsonpath.js&下载到我们项目的根目录下，以方便使用。具体的使用方法可以在网上查看。
为了显示我们的JSO数据，我们对我们的Main.qml进行了修改：
import QtQuick 2.0
ponents 1.1
import &jsonparser.js& as API
import &jsonpath.js& as JSONPath
\brief MainView with a Label and Button elements.
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: &mainView&
// Note! applicationName needs to match the &name& field of the click manifest
applicationName: &readjsonfile.liu-xiao-guo&
This property enables the application to change orientation
when the device is rotated. The default is false.
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: units.gu(60)
height: units.gu(85)
function update(json) {
console.log(&it is called in update!&);
// we can start to interpret the returned json
var authors = JSONPath.jsonPath(json, &$.store.book[*].author&);
console.log(&length: & + authors.length);
for (var i in authors ) {
console.log(&author[& + i +&] & + authors[i]);
mymodel.append( { &content&: authors[i],
&type&: &Authors&
// Get all of the books
var books = JSONPath.jsonPath(json, &$.store.book[*].title&);
console.log(&length: & + books.length);
for (var j in books ) {
console.log(&author[& + j +&] & + books[j]);
mymodel.append( { &content&: books[j],
&type&: &Books&
id: mainPage
title: i18n.tr(&Read Json File&)
ListModel {
id: mymodel
Component {
id: sectionHeading
Rectangle {
width: mainPage.width
height: childrenRect.height
color: &lightsteelblue&
text: section
font.bold: true
font.pixelSize: 20
ListView {
id: listview
anchors.fill: parent
model: mymodel
delegate: Text {
text: content
section.property: &type&
section.criteria: ViewSection.FullString
section.delegate: sectionHeading
Component.onCompleted: {
console.log(&Start to read JSON file&);
API.readJsonFile(&sample.json&, main)
为了完成我们的实验，我们也创建了一个sample.json文件。内容如下：
&store&: {
&category&: &reference&,
&author&: &Nigel Rees&,
&title&: &Sayings of the Century&,
&price&: 8.95
&category&: &fiction&,
&author&: &Evelyn Waugh&,
&title&: &Sword of Honour&,
&price&: 12.99
&category&: &fiction&,
&author&: &Herman Melville&,
&title&: &Moby Dick&,
&isbn&: &0-553-21311-3&,
&price&: 8.99
&category&: &fiction&,
&author&: &J. R. R. Tolkien&,
&title&: &The Lord of the Rings&,
&isbn&: &0-395-19395-8&,
&price&: 22.99
&bicycle&: {
&color&: &red&,
&price&: 19.95
运行我们的应用，我们应用显示的结果如下：js中如何操作json数据
一、要想熟练的操作json数据，就先要了解json数据的结构，json有两种结构:对象和数组。
　　1、对象&一个对象以“{”开始，“}”结束。每个“名称”后跟一个“:”；“‘名称/值’
对”之间使用“,”分隔。 名称用引号括起来；值如果是字符串则必须用括号，数值型则不需要。例如：
&var jsonObj=
{"str":"abc","intstr":,"max":6753,"time":""}；
数组是值（value）的有序集合。一个数组以“[” 开始，“]”结束。值之间运用 “,”分隔。
&&& 例如：var
jsonList=[{"str":"abc","intstr":,"max":6753,"time":""},
& & & 　　　　　　　　
{"str":"cde","intstr":,"max":15400,"time":""}];
二、JSON(JavaScript Object Notation)
是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。json在传输过程中是以文本形式存在的，即字符串的形式。而在JS
中需要操作的是对象，所以需要把json转换成对象，一般用“eval_r()”函数来实现，例如&：var
obj = eval_r('(' + json+ ')'); 这样就可以随意操作json了。
三、如果不知道jsonlist对象里的key和value怎样来获得其中的数据？
　　for(var i=0;i
&　　　　for(var key in jsonList[i]){
　　alert("key："+key+",value："+jsonList[i][key]);&
用这种方法就可以解析json数据了。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。