Cannot iterate multiple JSON value

Question

I am trying to use JSON value to view data in ng-repeat. But I am getting only first value. I tried using other method but not getting the value properly.

My JSON response:-

{
  "stylesheet": {
    "attribute-set": [
      {
        "attribute": {
          "_name": "text-align",
          "__prefix": "xsl",
          "__text": "center"
        },
        "_name": "__frontmatter",
        "__prefix": "xsl"
      },
      {
        "attribute": [
          {
            "_name": "space-before",
            "__prefix": "xsl",
            "__text": "80mm"
          },
          {
            "_name": "space-before.conditionality",
            "__prefix": "xsl",
            "__text": "retain"
          },
          {
            "_name": "font-size",
            "__prefix": "xsl",
            "__text": "22pt"
          },
          {
            "_name": "font-weight",
            "__prefix": "xsl",
            "__text": "bold"
          },
          {
            "_name": "line-height",
            "__prefix": "xsl",
            "__text": "140%"
          }
        ],
        "_name": "__frontmatter__title",
        "_use-attribute-sets": "common.title",
        "__prefix": "xsl"
      }
    ],
    "_xmlns:xsl": "http://www.w3.org/1999/XSL/Transform",
    "_xmlns:fo": "http://www.w3.org/1999/XSL/Format",
    "_version": "2.0",
    "__prefix": "xsl"
  }
}

On suggestion from previous question I want to achieve all the datas from "__name" from the "attribute" key.

I tried this as suggested on my controller:-

console.log($scope.jsonObj);
                angular.forEach($scope.jsonObj,function(value,key){
                 console.log(value["attribute-set"][0]["attribute"]["_name"]);
                    });

jsonObj is my JSON object

The output is text-align in my console which is the 1st _name attribute value .

How can I achieve ng-repeat of _name value from this JSON ?

attribute is an object first, then an array, is that correct? if so you need to check what it is and if array, then you'll have to iterate through again — StudioTime
– StudioTime, Commented Sep 6, 2018 at 8:38
Why don't you create a new scope var: $scope.records = jsonObj.stylesheet.attribute-set; and then you can iterate this records: ng-repeat="record in records" — Curlas
– Curlas, Commented Sep 6, 2018 at 8:47
@DarrenSweeney its correct , I am converting this from xsl file. — WhoAmI
– WhoAmI, Commented Sep 6, 2018 at 9:18
@Curlas It's showing set is not defined when using $scope.records = $scope.jsonObj.stylesheet.attribute-set; — WhoAmI
– WhoAmI, Commented Sep 6, 2018 at 9:21
i'm sorry, the javascript parser it's reading "attribute-set" like a math operator. Try: $scope.records = $scope.jsonObj.stylesheet["attribute-set"] — Curlas
– Curlas, Commented Sep 6, 2018 at 9:35

ste2425 · Accepted Answer · 2018-09-07 10:45:03Z

1

The data structure is rather terrible, same objects keys with different data types makes things a little difficult. However this will return you a list of all _name fields.

You then bind that to your scope etc.

data
    .stylesheet['attribute-set']
    .map(x => {
        if (Array.isArray(x.attribute))
            return x.attribute.map(y => y['_name']);
        else
            return [x.attribute['_name']]; 
    })
    .reduce((accu, cur) => accu.concat(...cur), []);

It essentially extracts out the _name field into an array for each attribute set then reduces that into a single array.

See it in action here

edited Sep 7, 2018 at 10:45

answered Sep 6, 2018 at 9:06

ste2425

4,8373 gold badges26 silver badges39 bronze badges

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

5 Comments

WhoAmI Over a year ago

And how can I make changes on those key values and save it to same json again?

ste2425 Over a year ago

You could map the array. Depends on what you want. If you want to just manipulate the _name but keep the entire object then don't extract it out. Either way you've got a multidimensional array that you will find it easier to flatten.

ste2425 Over a year ago

@WhoAmI iv'e created a jsFiddle. If you're still having issues executing the code please create a fiddle that i can see it failing in.

ste2425 Over a year ago

@WhoAmI your exception in that fiddle is because $scope has not been defined. Once thats fixed youve got a dozen other exceptions because things don't exist, like X2JS. The code in the fiddle is not the code i have posted or similar? Have you coppied the wrong code?

WhoAmI Over a year ago

Thanks , it is working fine now . I am now able to change the value in the array and need to remap it on my json object with the new value. How can I do that ?

tokism · Accepted Answer · 2018-09-06 08:51:05Z

I'm assuming you want all the values for _name. If you don't, please specify which values of _name you want. Firstly you'll have to restructure your data likes this with all the attributes in one array:

{
  "stylesheet": {
    "attribute_set": [
      {
        "_name": "text-align",
        "__prefix": "xsl",
        "__text": "center"
      },
      {
        "_name": "__frontmatter",
        "__prefix": "xsl"
      },
      {
        "_name": "space-before",
        "__prefix": "xsl",
        "__text": "80mm"
      },
      {
        "_name": "space-before.conditionality",
        "__prefix": "xsl",
        "__text": "retain"
      },
      {
        "_name": "font-size",
        "__prefix": "xsl",
        "__text": "22pt"
      },
      {
        "_name": "font-weight",
        "__prefix": "xsl",
        "__text": "bold"
      },
      {
        "_name": "line-height",
        "__prefix": "xsl",
        "__text": "140%"
      },
      {
        "_name": "__frontmatter__title",
        "_use-attribute-sets": "common.title",
        "__prefix": "xsl"
      }
    ],
    "_xmlns:xsl": "http://www.w3.org/1999/XSL/Transform",
    "_xmlns:fo": "http://www.w3.org/1999/XSL/Format",
    "_version": "2.0",
    "__prefix": "xsl"
  }
}

And then running:

angular.forEach($scope.jsonObj.stylesheet.attribute_set, function(value, key) {
    console.log(value._name);
});

First of all I cannot restructure my JSON as it is a conversion output of a xslt file. And yes I want to list all the _name key in my view and also accordingly edit my _text value and save it in the same JSON structure.

Collectives™ on Stack Overflow

Cannot iterate multiple JSON value

2 Answers 2

5 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Related