如何使用Angular JS显示json的完整数据列表?

时间:2016-08-22 06:45:48

标签: angularjs angularjs-scope

来自getArticalMediaHomePageData.json的json数据和此json中的数据是

 {
  "articalMediaList" : [ {
    "code" : "KLSG0001",
    "codeDescr" : "Buzz",
    "sectionArticleList" : [ {
      "articleID" : "klampm1",
      "shortDesc" : "Lenova is Growing Day by day in Tech Industry"
    }, {
      "articleID" : "KLAMPM18",
      "shortDesc" : "avoid corruption "
    }, {
      "articleID" : "klampm4",
      "shortDesc" : "asdf"
    } ]
  }, {
    "code" : "KLSG0002",
    "codeDescr" : "Business",
    "sectionArticleList" : [ {
      "articleID" : "",
      "shortDesc" : "naidu"
    }, {
      "articleID" : "klampm10",
      "shortDesc" : "PM urges political parties to keep national..."
    }, {
      "articleID" : "KLAMPM19",
      "shortDesc" : "profit loss"
    }, {
      "articleID" : "klampm3",
      "shortDesc" : "asdsad"
    } ]
  }, {
    "code" : "KLSG0003",
    "codeDescr" : "Career",
    "sectionArticleList" : [ {
      "articleID" : "klampm11",
      "shortDesc" : "Marine Commandos get a new Base at Visakhapatnam "
    }, {
      "articleID" : "klampm4",
      "shortDesc" : "asdf"
    } ]
  }, {
    "code" : "KLSG0004",
    "codeDescr" : "Entertainment",
    "sectionArticleList" : [ {
      "articleID" : "klampm12",
      "shortDesc" : "Steps Taken To Improve Public Transport In Cities"
    }, {
      "articleID" : "klampm13",
      "shortDesc" : "IT dept issue 7 lakh letters for Non PAN..."
    }, {
      "articleID" : "klampm14",
      "shortDesc" : "Cabinet approves the New Transgender Persons..."
    }, {
      "articleID" : "KLAMPM16",
      "shortDesc" : "iphone"
    }, {
      "articleID" : "KLAMPM17",
      "shortDesc" : "mobile phone"
    }, {
      "articleID" : "KLAMPM20",
      "shortDesc" : "the legend movie"
    }, {
      "articleID" : "klampm4",
      "shortDesc" : "asdf"
    }, {
      "articleID" : "klampm5",
      "shortDesc" : " Dharmavaram Express to be launched..."
    } ]
  }, {
    "code" : "KLSG0005",
    "codeDescr" : "Life Style",
    "sectionArticleList" : [ {
      "articleID" : "KLAMPM24",
      "shortDesc" : "dress materials"
    }, {
      "articleID" : "klampm6",
      "shortDesc" : "Team of students"
    }, {
      "articleID" : "klampm7",
      "shortDesc" : "Death of Elephants  ."
    }, {
      "articleID" : "klampm8",
      "shortDesc" : "Indian railway  "
    }, {
      "articleID" : "klampm9",
      "shortDesc" : " Foundation expand health..."
    } ]
  }, {
    "code" : "KLSG0006",
    "codeDescr" : "Political",
    "sectionArticleList" : [ {
      "articleID" : "KLAMPM1",
      "shortDesc" : " Industry" 
    }, {
      "articleID" : "KLAMPM32",
      "shortDesc" : "corruption" 
    } ]
  }, {
    "code" : "KLSG0007",
    "codeDescr" : "Sports",
    "sectionArticleList" : [ {
      "articleID" : "KLAMPM26",
      "shortDesc" : "Tennis brought one more Medal" 
    }, {
      "articleID" : "KLAMPM31",
      "shortDesc" : "  shuttle" 
    } ]
  }, {
    "code" : "KLSG0008",
    "codeDescr" : "Technology",
    "sectionArticleList" : [ ]
  }, {
    "code" : "KLSG0009",
    "codeDescr" : "TopStories",
    "sectionArticleList" : [ ]
  } ]
}

现在我想通过将它们与articalMediaList“----->”代码“:”KLSG0001“

分组,在jsp页面上显示列表

如何实现这一目标。

1 个答案:

答案 0 :(得分:0)

您需要将代码更改为

 var data =  {
                  "articalMediaList": [{
                      "code": "KLSG0001",
                      "codeDescr": "Buzz",
                      "sectionArticleList": [{
                          "articleID": "klampm1",
                          "shortDesc": "Lenova is Growing Day by day in Tech Industry"
                      }, {
                          "articleID": "KLAMPM18",
                          "shortDesc": "avoid corruption "
                      }, {
                          "articleID": "klampm4",
                          "shortDesc": "asdf"
                      }]
                  }, {
                      "code": "KLSG0002",
                      "codeDescr": "Business",
                      "sectionArticleList": [{
                          "articleID": "",
                          "shortDesc": "naidu"
                      }, {
                          "articleID": "klampm10",
                          "shortDesc": "PM urges political parties to keep national..."
                      }, {
                          "articleID": "KLAMPM19",
                          "shortDesc": "profit loss"
                      }, {
                          "articleID": "klampm3",
                          "shortDesc": "asdsad"
                      }]
                  }, {
                      "code": "KLSG0003",
                      "codeDescr": "Career",
                      "sectionArticleList": [{
                          "articleID": "klampm11",
                          "shortDesc": "Marine Commandos get a new Base at Visakhapatnam "
                      }, {
                          "articleID": "klampm4",
                          "shortDesc": "asdf"
                      }]
                  }, {
                      "code": "KLSG0004",
                      "codeDescr": "Entertainment",
                      "sectionArticleList": [{
                          "articleID": "klampm12",
                          "shortDesc": "Steps Taken To Improve Public Transport In Cities"
                      }, {
                          "articleID": "klampm13",
                          "shortDesc": "IT dept issue 7 lakh letters for Non PAN..."
                      }, {
                          "articleID": "klampm14",
                          "shortDesc": "Cabinet approves the New Transgender Persons..."
                      }, {
                          "articleID": "KLAMPM16",
                          "shortDesc": "iphone"
                      }, {
                          "articleID": "KLAMPM17",
                          "shortDesc": "mobile phone"
                      }, {
                          "articleID": "KLAMPM20",
                          "shortDesc": "the legend movie"
                      }, {
                          "articleID": "klampm4",
                          "shortDesc": "asdf"
                      }, {
                          "articleID": "klampm5",
                          "shortDesc": " Dharmavaram Express to be launched..."
                      }]
                  }, {
                      "code": "KLSG0005",
                      "codeDescr": "Life Style",
                      "sectionArticleList": [{
                          "articleID": "KLAMPM24",
                          "shortDesc": "dress materials"
                      }, {
                          "articleID": "klampm6",
                          "shortDesc": "Team of students"
                      }, {
                          "articleID": "klampm7",
                          "shortDesc": "Death of Elephants  ."
                      }, {
                          "articleID": "klampm8",
                          "shortDesc": "Indian railway  "
                      }, {
                          "articleID": "klampm9",
                          "shortDesc": " Foundation expand health..."
                      }]
                  }, {
                      "code": "KLSG0006",
                      "codeDescr": "Political",
                      "sectionArticleList": [{
                          "articleID": "KLAMPM1",
                          "shortDesc": " Industry"
                      }, {
                          "articleID": "KLAMPM32",
                          "shortDesc": "corruption"
                      }]
                  }, {
                      "code": "KLSG0007",
                      "codeDescr": "Sports",
                      "sectionArticleList": [{
                          "articleID": "KLAMPM26",
                          "shortDesc": "Tennis brought one more Medal"
                      }, {
                          "articleID": "KLAMPM31",
                          "shortDesc": "  shuttle"
                      }]
                  }, {
                      "code": "KLSG0008",
                      "codeDescr": "Technology",
                      "sectionArticleList": []
                  }, {
                      "code": "KLSG0009",
                      "codeDescr": "TopStories",
                      "sectionArticleList": []
                  }]
              };
              for (var i = 0; i < data.articalMediaList.length; i++) {
                  if (data.articalMediaList[i].code == 'KLSG0001') {

                      $scope.result= data.articalMediaList[i].sectionArticleList;
                  }
              }