CODEWITHSUNDEEP
angulartypescriptangular7
Jayesh Vyas
Jayesh Vyas

Reputation: 1351

store json data into array in Angular TypeScript

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.

Upvotes: 0

Views: 8416

Answers (2)

abd995
abd995

Reputation: 1839

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);

Upvotes: 2

Ryan E.
Ryan E.

Reputation: 1027

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.

Upvotes: 2

Related Questions