store json data into array in Angular TypeScript

Question

I am facing a problem while I am using Angular mention library.

Here is my typescript code.

items: Object[] = ["jay","roy","gini","rock","joy","kiya"];

I am using this defined named items array in my component.html file

<input  type="text" id="cname" name="cname" placeholder="Type  Here.." [mention]="items">

so it is creating a text box and it is giving suggestion when I am typing any user name.

Suppose I type @j then it will suggest all the names starting with the name j and after entering it will be entered into the text box with the sign @. So basically it is giving the functionality of the auto search from the array and for this, I have imported the mention library into my Angular7 application.

I am designing a project in which all the users are coming from the web service. So I need to store those users into that items named array.

The JSON format is as follows.

 [
   {
      "attributes":  {
        "User": "jay"
    }
},
   {
      "attributes": {
        "User": "roy"
    }
},
    {
      "attributes":{
        "User": "kiya"
    }
},
    {
      "attributes":{
        "User": "gini"
    }
},
   {
      "attributes": {
        "User": "rock"
    }
},
   {
      "attributes": {
        "User": "joy"
    }
}

]

The above JSON data is coming from a web server and I am storing it into a variable. So I want to store this into that above array named items so that in my text box while typing it can give autosuggest with the real data.

I have tried this thing but at the time of typing in the text box, it is not giving any suggestions.

You have defined a variable named items as a Object[] which means an array of objects. You then initialize this variable to the value ["jay","roy","gini","rock","joy","kiya"]; which is an array of strings (string[]). That doesn't make sense — Daniel
– Daniel, Commented Apr 3, 2019 at 18:01
"I have tried this thing" ... what have you tried? I don't see the logic where you map the json from your webservice to a string[]. — Ryan E.
– Ryan E., Commented Apr 3, 2019 at 18:03
@RyanE. the users that I am getting from the server, I stored that in a variable using service call and then I mapped the items with that variable but with this approach I was not able to get the suggestion while typing. that is what I tried. — Jayesh Vyas
– Jayesh Vyas, Commented Apr 3, 2019 at 18:07
I left an answer. If that doesn't help can you respond with what you have tried? It's possible angular isn't detecting a change in the object array since Angular will look at the reference and if the reference doesn't change then it won't send the updated array down to the directive. — Ryan E.
– Ryan E., Commented Apr 3, 2019 at 18:11
@JayeshVyas Try using the mentionConfig like I had said in my answer. — abd995
– abd995, Commented Apr 3, 2019 at 18:33

Ryan E. · Accepted Answer · 2019-04-04 16:20:59Z

2

If you need help mapping your web service result to the string array something like this should do the trick.

Updated answer for latest json.

this.myWebService.myWebServiceMethod.subscribe(result => {
    this.items = result.map(item => {
        return item.attributes.User;
    }
}

As @abd995 points out, there could be performance concerns with this method since you are looping over the array. Be mindful how often you are executing the above code. If your array is relatively small then there isn't much to worry about, but if you have 5k+ records you may want to think about updating your API to return the data in a better format - one you don't have to manipulate.

edited Apr 4, 2019 at 16:20

answered Apr 3, 2019 at 18:09

Ryan E.

1,0279 silver badges18 bronze badges

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

2 Comments

abd995 Over a year ago

If the array is large, looping through the data set is not recommended as it will lead to performance issues. Especially when 'mention' will work on object arrays.

Ryan E. Over a year ago

@abd995 For sure. But if the library didn't support that type of configuration then you would have no choice but to convert to a string array. Or update your back end to return a string array.

abd995 · Accepted Answer · 2019-04-04 18:20:32Z

2

Please add mentionConfig when the items is an array of objects. The field of the object which is to be used as the label should be given as the labelKey in the mention config like this.

<input type="text" [mention]="items" [mentionConfig]="{ labelKey:'User'}">

Update

Since the question was updated with an object array with two nested properties, mentionConfig cannot be used since mention only supports maximum of one level of nested property. Check the mention's source code here. I have also raised an issue in github regarding this. So in this case we would have to create an array of labels from object array like so.

items = items.map((item) => item.attributes.User);

edited Apr 4, 2019 at 18:20

answered Apr 3, 2019 at 18:12

abd995

1,86910 silver badges14 bronze badges

6 Comments

Ryan E. Over a year ago

This would also require the author to set the response from the webserver directly to the items[]. Which may be what they are doing even though the question doesn't lead you to that conclusion.

Ryan E. Over a year ago

Ah nevermind, I see where they say "So I want to store this into that above array named items". I think I was confused because the initial values were strings. I also didn't expect the library to have a config type variable which allows you to specify a key on an object to look at. +1 for that library author

Jayesh Vyas Over a year ago

Hii, your solution is working properly, I need one suggestion from you because I don't know how to use properly mention the library in angular. if my JSON format changes. Please see an edit on my post I have updated the JSON format. I tried with [mention]="items.attributes" and also tried with [mentionConfig]="{ labelKey: 'User'}". Can you please suggest how can I achieve this?

abd995 Over a year ago

@JayeshVyas Have you tried [mentionConfig]="{ labelKey: 'attributes.User'}"

abd995 Over a year ago

@JayeshVyas Looks like mention does not support nested object properties as labelKey. This is the sourcecode of mention which sets labelKey without considering the possibility of nested object properties. If this is the case you will have to use the same method mentioned in @Ryans answer. Create an array using map like this items = items.map((x) => x.attributes.User)

|

Collectives™ on Stack Overflow

store json data into array in Angular TypeScript

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related