Roysh Roysh - 5 months ago 21
AngularJS Question

Saving json as an array of objects

I have an angular app that looks like this:

(function (){
var app = angular.module('world', []);

app.controller('WorldController', function(){
this.tabs = tabs;
});

var tabs =[
{
id: "1",
name: "first tab name",
title: "first tab title",
content: "first tab cont"
},
{
id: "2",
name: "orci, consectetuer",
title: "sem elit, pharetra ut,",
content: "augue scelerisque mollis. Phasellus"
},
{
id: "3",
name: "rhoncus. Nullam velit dui, semper et, lacinia vitae,",
title: "Nam porttitor",
content: "tellus eu augue porttitor interdum. Sed auctor odio a purus."
},
{
id: "4",
name: "nulla magna, malesuada vel, convallis in, cursus et, eros. Proin",
title: "montes, nascetur ridiculus mus.",
content: "Sed eget lacus. Mauris non dui nec urna suscipit nonummy."
}
];

})();


I want to load the whole tabs array from a json. I have no problem to generate a json and fetch it, but I don't know how to convert it into the format as shown above.

When I try to do
var tabs=jQuery.getJSON('myJson.json');
, the json is fetched, but it's not loaded in the format that I want.

How can I convert a json into the format of the array shown above?

While my json looks like that -

[
{
"id": "1",
"name": "mus. Proin vel arcu eu odio tristique pharetra.",
"title": "faucibus",
"content": "Donec dignissim magna a tortor. Nunc commodo auctor"
},
{
"id": "2",
"name": "orci, consectetuer",
"title": "sem elit, pharetra ut,",
"content": "augue scelerisque mollis. Phasellus"
},
{
"id": "3",
"name": "rhoncus. Nullam velit dui, semper et, lacinia vitae,",
"title": "Nam porttitor",
"content": "tellus eu augue porttitor interdum. Sed auctor odio a purus."
},
{
"id": "4",
"name": "nulla magna, malesuada vel, convallis in, cursus et, eros. Proin",
"title": "montes, nascetur ridiculus mus.",
"content": "Sed eget lacus. Mauris non dui nec urna suscipit nonummy."
}
];

Answer

Use the $http service in angular. For example, if you have a data.json file in the same folder that contains the json data then use

app.controller('MainCtrl', function($scope, $http) {
  $http.get('data.json').success(function(data){
    $scope.fetched = data;
  })
});

Here is a plunker example.

Comments