Search code examples
angularjsangularjs-scope

How to show the full list of data from json using Angular JS?


Am having a json Data from getArticalMediaHomePageData.json and the data inside this json is

 {
  "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" : [ ]
  } ]
}

now I want to show the list on a jsp page by grouping them with there articalMediaList" -----> "code" : "KLSG0001"

How to make this possible.


Solution

  • you need to change your code to this

     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;
                      }
                  }