fetching data from array inside json in angular

Question

I'm trying to get two values from a JSON

Content of JSON:

[
   {
      "type":"session_start",
      "properties":[
         {
            "property":"activity",
            "type":"string"
         }
      ]
   }
]

to use in a component but been having trouble with getting the value of property

these are the codes I'm trying to use right now, but for some reason I get the error.

Property 'properties' does not exist on type 'Object'.

any ideas on how to make the outcome of props be "activity" ?

   type = this.service.getData().pipe(map((response: any) => response.map((eventRead: { [x: string]: any; }) => eventRead['name'])));
    
   props = this.service.getData().pipe(map(p => p?.properties?.property));

it's the issue of type definition. Can you share the code of "service.getData()"? Or try map((p: any) => p?.properties?.property) — Julian W.
– Julian W., Commented Aug 31, 2022 at 3:51
That didn't show any errors! It still doesn't work but it might be a different part of my component :) — Leonardo Rodrigues
– Leonardo Rodrigues, Commented Aug 31, 2022 at 4:10

Naren Murali · Accepted Answer · 2022-08-31 04:24:54Z

1

You just need to loop through the array of arrays, you can use flatMap to flatten the array of arrays inorder to get the desired output!

const arr = [{
  "type": "session_start",
  "properties": [{
    "property": "activity",
    "type": "string"
  }]
}]

const service = {
  getData: () => rxjs.of(arr)
};

type = service.getData().pipe(rxjs.map((response) => response.map((eventRead) => eventRead['type'])));
console.log('type');

type.subscribe(console.log);

props = service.getData().pipe(rxjs.map(arrayData => {
  const output =  arrayData.flatMap(p => {
    if (p.properties && p.properties.length) {
      return p.properties.map(x => x.property);
    }
    return [];
  }) 
  // if you want an array output uncomment the below line!
  // return output;
  return output && output[0];
}));
console.log('props');
props.subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.5.6/rxjs.umd.min.js" integrity="sha512-yUlloKtrX4U41iKbaafsHrrwII0n1uAX9+3KzuaTjkfgLicBplGfr0vv7FtfwC5kgead1Dmr7sjunFFp0a+s9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Update:

It was due to autocomplete and options being mapped incorrectly with elementRef

working stackblitz

edited Aug 31, 2022 at 4:24

answered Aug 31, 2022 at 2:52

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

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

6 Comments

Leonardo Rodrigues Over a year ago

I went through the code you sent and the only thing I see that might not work for me is that you put the array in the component which is something I cannot do. The function getData() is the one that gets the json's content so can I just use this.service here? I'm not sure if it's possible to use flatmap on an object. Other than that it seems like a light in the dark for me. TYSM NAREN

Leonardo Rodrigues Over a year ago

I haven't figured it out yet. my second box is still showing type. Do you mind if I send you the entire component?

Naren Murali Over a year ago

@LeonardoRodrigues Could you provide a stackblitz, along with screenshots of expected output?

Leonardo Rodrigues Over a year ago

stackblitz.com/github/leoquiro/Assignment?file=src/app/… is here, how do I send you screenshots?

Naren Murali Over a year ago

@LeonardoRodrigues attach to the question

|

paranaaan · Accepted Answer · 2022-08-31 03:28:04Z

1

properties is inner array. So, you should call something like

props = this.service.getData().pipe(
  map(p => {
    const firstElement = p.properties.shift();
    return firstElement.property;
  })
);

props.subscribe(p => console.log(p)); // activity

answered Aug 31, 2022 at 3:28

paranaaan

1,7552 gold badges13 silver badges21 bronze badges

Comments

Dinuda Yaggahavita · Accepted Answer · 2022-08-31 04:19:11Z

0

You can simply and directly get the value of "property" through,

const json = [
  {
    type: 'session_start',
    properties: [
      {
        property: 'activity',
        type: 'string',
      },
    ],
  },
];

var property = json[0].properties[0].property;
console.log(property);

Output:

activity

answered Aug 31, 2022 at 4:19

Dinuda Yaggahavita

1,1691 gold badge11 silver badges22 bronze badges

Comments

Kartik Gogia · Accepted Answer · 2022-08-31 05:27:03Z

0

You can use the optional chaining operator (?.) while accessing the properties array from the json to avoid the exception, you have to add checks for each level of the object.

if there is a single element in properties array then you can directly access the element by index like below:

let property = json[0]?.properties[0]?.property;

if there are multiple elements in properties array then you do something like below:

let prop = json[0]?.properties;
if(prop?.length > 1)
{
   for(let i=0;i<prop.length;i++)
   {
      //You can access the property data element here.
      console.log(prop[i].property);
   }
}

answered Aug 31, 2022 at 5:27

Kartik Gogia

536 bronze badges

Collectives™ on Stack Overflow

fetching data from array inside json in angular

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related