如何从json文档中打印列表

时间:2018-09-12 10:12:55

标签: javascript html json ionic-framework angularjs-ng-repeat

我想从list.json文件中打印数据

App::uses('AppModel', 'Model');

class Category extends AppModel {

var $name = 'Category';
var $displayField = 'Category_cname';

public function getChildCategory()
{
     $Db = ConnectionManager::getDataSource($this->useDbConfig);

    $cattbl = $Db->fullTableName('categories');
    $dat    =   $this->query("select yt.cname,yt.id
from $cattbl yt
where not exists (select null from $cattbl where parent_id = yt.id) LIMIT 0,10");
    return $dat;

}

这是我的清单。杰森

    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","list.json",false);
    xmlhttp.send();
    var list = xmlhttp.responseText;

}

我正在获取

之类的数据
{

"p1": {
    "name":"fruit song",
    "cat":"learning",
    "lan":"eng",
    "ur":"abc1"
},
"p2": {
    "name":"eting sugar",
    "cat":"random",
    "lan":"eng",
    "ur":"abc2"
},
"p3": {
    "name":"salgira ka din",
    "cat":"birthday",
    "lan":"urdu",
    "ur":"abc3"
},
"p4": {
    "name":"twinkle twinkle",
    "cat":"random",
    "lan":"eng",
    "ur":"abc4"
},
"p5": {
    "name":"abc song",
    "cat":"learning",
    "lan":"eng",
    "ur":"abc5"
}

这很好用,并在alert($ scope.n)中显示数据;

我想用类似的卡片在html中打印此json文件

p1名称:{{n}}类别:{{c}}语言:{{l}}

p2名称:{{n}}类别:{{c}}语言:{{l}}

list.json内将有50多个P1类型记录。

谁能告诉我代码以html格式打印所有记录

2 个答案:

答案 0 :(得分:0)

您应该使用AngularJS的ng-repeat,例如

<div>
  <p ng-repeat="(key, val) in obj">{{key}} name: {{val.name}} category : {{val.cat }} language : {{val.lan}}</p>
</div>

有关将来的参考,请使用AngularJS文档:ngRepeat

答案 1 :(得分:0)

所以我的html是

changes:
  - addForeignKeyContraint:
    baseColumnNames: id1, id2
    baseTableName: B
    constraintName: fb_id1_id2
    referencedColumnNames: id1, id2
    referencedTableName: A

我的控制器是

<li ng-repeat="item in items"   item="item" ng-click="model.itemValue = item" >
<div class = "row" style="background: url(img/4.jpg) no-repeat center;background- 
size:cover;">
<div class = "col"><h3>{{name}} :)</h3></div>
<div class = "col col-60"><h3>{{email}}</h3></div>
<div class = "col"><h3><button class="button button-calm button rdm">PLAY</button> 
</h3></div>
</div>
</li>

这对我有用