Блог

Главная - Вопросы по программированию - Синтаксический анализ JSON в HTML

Синтаксический анализ JSON в HTML

#javascript #html #arrays #json #angular

#javascript #HTML #массивы #json #угловой

Вопрос:

написание сервиса, который возвращает массив значений JSON. На стороне получателя услуги обход массива обрабатывается с помощью *ngFor . Каждый JSON извлекается, но я не могу проанализировать каждое значение внутри JSON. Я пытаюсь составить список ссылок, содержимое Json — это имя ссылки и маршрут, на который должна быть направлена ссылка.

пытался получить доступ к значениям внутри JSON с помощью канала KeyValue. пытался создать пользовательский канал. пытался ли вызвать значение типа «{{obj.Name }} {{объект.Маршрут }}», в котором obj является объектом json.

Это структура массива JSON.

 const LinkDirectory: ILinks[] =
[
{Name: 'Home', Route: '/home'},
{Name: 'Aboutus', Route: '/Aboutus'},
];

ILinks — это интерфейс

 export interface ILinks {
    Name: string;
    Route: string;
}

Угловой сервис, который возвращает каталог.

 @Injectable()
export class Directory{
    getLinks(): ILinks[]{
        return LinkDirectory;
    }
}

Это угловой компонент, который получает сервис.

 export class LinksPopulate implements OnInit {
  LinkDirectory: ILinks[];
  constructor(private DirRetriver: Directory) {}
  ngOnInit(): void {
    this.LinkDirectory = this.DirRetriver.getLinks();
  }
}

Html-код с *ngFor

 <div>
      <ul>
      <li *ngFor="let link of LinkDirectory">
      <a routerLink={{link.Route}}>{{link.Name}}</a>
      </li>
      </ul>
</div>

список ссылок с указанным именем.
как страница всех товаров на сайте покупок.

Комментарии:

1. что вы получаете в результате?

2. Пожалуйста, предоставьте нам фактические данные JSON вместо формата. И вы пытались JSON.parse() проанализировать возвращенные данные перед их сохранением?

3. Как я вижу в вашем коде, который вы определяете const LinkDirectory , вы определяете эту переменную внутри функции? Переменная, которую вы используете внутри *ngFor, должна быть объявлена как поле экземпляра (переменная компонента). Поделитесь немного больше кода о том, как вы извлекаете данные *ngFor, ваш синтаксис HTML кажется прекрасным.

4. @porgo Я хочу заполнить страницу списком ссылок. каталог ссылок будет обновляться, как только будут добавлены страница и маршруты. результат, к которому я стремлюсь, — это страница со списком ссылок. рассмотрим сайт демонстрации продукта компании, ориентированной на продукт, со страницей для каждого продукта. существует ссылка для просмотра списка всех продуктов, список содержит название продукта, которое доступно для просмотра и при нажатии приведет к странице продукта. Я пытаюсь создать ту страницу, на которой будут перечислены все продукты.

5. @Dblaze47 простите меня, но что вы подразумеваете под фактическим файлом JSON. Я не устал его разбирать

Ответ №1:

Я исправил проблему, используя class LinkDirectory вместо интерфейса и удалил весь интерфейс из микса.

Метки: