Блог

У меня есть некоторые данные в проекте angular, которые я хочу использовать вместо базы данных, поскольку данных очень мало … около 50 идентификаторов с 5 полями…вот данные:

 mydata = [

  {
    "id": 3,
    "active": 1,
    "title": "Title 1",
    "text": "this is some text from 3"
  },
  {
    "id": 31,
    "active": 1,
    "title": "Title 1",
    "text": "this is some text from 31"
  },
  {
    "id": 11,
    "active": 1,
    "title": "Title 1",
    "text": "this is some text for 11"
  },
  {
    "id": 21,
    "active": 1,
    "title": "Title 1",
    "text": "this is some text from 21"
  }

]
  

Тогда у меня есть метод:

 getDataText(id) {
    // code to get the text of the data with the selected id
    // do it should get me the data (in this case the text from id 11) 
}
  

Затем в component.html файл, который у меня есть:

 <button (click)="getDataText(11)">Get Data by Id</button>
  

Как я могу это сделать?

Попробуйте это:

 getDataText(id) {
    let findedData = this.myData.find(i => i.id === id);
    if (typeof findedData === 'undefined') {
       return null;
    }
    return findedData;
} 
  

Обратите внимание, если с условием ничего не найдено, результат будет undefined .

Это должно работать:

getDataText(id) {
const result = this.mydata.filter(x => x.id === id);
return resu<
}

Ваш getDataText должен выглядеть так:

 getDataText(id) {
  const data = myData.find(x => x.id === id);
  return data ? data.text : `Cannot find data with id ${id}`;
}
  

Вы могли бы даже разделить на два метода:

 getDataById(id) {
  return myData.find(x => x.id === id);
}

getDataText(id) {
  const data = this.getDataById(id);
  return data ? data.text : `Cannot find data with id ${id}`;
}
  

 getDataText = id => (this.myData.find(i => i.id === id) || {}).text;
  

Это вернет текст элемента с заданным идентификатором или неопределенный, если нет элемента с заданным идентификатором.

 public result = "Get Data by Id";
public getDataText(id) {
  const reqObj = this.mydata.find(item => item.id === id);
  this.result = reqObj ? reqObj.text : 'nothing found';
}


<button (click)="getDataText(11)">{{result})</button>
  

Здесь вы можете увидеть мой пример