How to push json into a nested array - angularjs

Question

I can make it work when hardcoding the data, like this:

$scope.ChatHistory=[];
$scope.ChatHistory.push({
        IsCustomer: false,
        UserText: "Please enter the category you are looking for.",
        OptionItems: [
            { OptionId: "", SortOrder: "1", OptionName: "Complaint" },
            { OptionId: "", SortOrder: "2", OptionName: "Registration" },
            { OptionId: "", SortOrder: "3", OptionName: "Enquiry" }
        ]
    });

HTML:

<ul>
  <li ng-repeat="objHistory in ChatHistory track by $index"
      ng-class="{'user': objHistory.IsCustomer, 'desk': !IsCustomer}">
      {{ objHistory.UserText }}
      <p ng-repeat="opt in objHistory.OptionItems track by $index">
         {{ opt.SortOrder }} {{ opt.OptionName }}
      </p>
  </li>
</ul>

Now, I get the data from DB like this:

$scope.GetData = function (categoryId) {
        DataFactory.GetData(categoryId)
        .success(function (data,status) {            
            $scope.ChatHistory.push(data);
            console.log(data);
        })
        .error(function (data, status) {                        
        });
    }

//console log

 "{\"IsCustomer\":false,
  \"UserText\":\"\",
  \"OptionItems\":[
     {\"OptionId\":1,\"SortOrder\":1,\"OptionName\":\"Complaint\"},
     {\"OptionId\":2,\"SortOrder\":2,\"OptionName\":\"Request\"},
     {\"OptionId\":3,\"SortOrder\":3,\"OptionName\":\"Enquiry\"}
   ]
 }"

How to push this 'data' into the 'ChatHistory' array now. $scope.ChatHistory.push(data) is not working. No error, but nothing shows up in the html.

Is the scope being "applied" (i.o.w. $scope.$apply()) after your changes? — Marvin Smit
– Marvin Smit, Commented Jan 19, 2015 at 8:51
Did you declare ChatHistory as an array so you can push to it? $scope.ChatHistory=[]; — Wayne Ellery
– Wayne Ellery, Commented Jan 19, 2015 at 8:57
I think scope is being applied. I checked console.log($scope.ChatHistory) — sukesh
– sukesh, Commented Jan 19, 2015 at 9:00

Matt · Accepted Answer · 2015-01-19 09:04:59Z

2

It seems that your JSON object is being returned as a string. In the code that pulls data from the DB, are you returned an array at first? If so, you could run through that array and manually store each field into your own self-created JSON object, thereby ensuring that you're effectively sending and receiving a valid JSON.

If that doesn't work (this probably meaning Angular is converting the JSON to a string during the transfer), then you could simply use JSON.parse on the variable data (the output of the console log, which is the string). However, you'd have to get rid of the newlines:

JSON.parse("{\"IsCustomer\":false, \"UserText\":\"\", \"OptionItems\":[ {\"OptionId\":1,\"SortOrder\":1,\"OptionName\":\"Complaint\"}, {\"OptionId\":2,\"SortOrder\":2,\"OptionName\":\"Request\"}, {\"OptionId\":3,\"SortOrder\":3,\"OptionName\":\"Enquiry\"}]}")

which should give you your JSON object.

answered Jan 19, 2015 at 9:04

Matt

584 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sukesh Over a year ago

Thank you. ur suggestion worked, but i had to parse it twice. Only then it works or else it shows no data $scope.ChatHistory.push(JSON.parse(JSON.parse(data)));

qamar · Accepted Answer · 2015-01-19 08:57:54Z

0

I dont think you have to push the data object into ChatHistory. Just try assigning like following:

$scope.ChatHistory = data; // this is the data that is returned from server call.

answered Jan 19, 2015 at 8:57

qamar

1,4471 gold badge10 silver badges12 bronze badges

1 Comment

sukesh Over a year ago

That did not work. It only adds empty li's. And also, chatHistory is an array and is like a stringbuilder. Every time there is a new set of 'data' it has to be added to the existing.

Collectives™ on Stack Overflow

How to push json into a nested array - angularjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related