Получить значение из JSON в HTML

function callLink(imageId) {
        $.getJSON('/GetData/GetImage?idImage=' + imageId, function (data) {
            console.info(data);
        });
    }

Результат JSON, когда я запускаю приведенный выше код,

[
   {
      FileName:"10012816.jpeg"      ID:2591      TicketID:"10012816"
   },
   {
      FileName:"1562754508233.jpeg"      ID:2591      TicketID:"10012816"
   }
]

Как я могу получить результат из JSON выше и поместить его в html-код. Так

    @foreach (var item in data) {
//html code
<h6 class = "mb-3">@item.FileName</h6>
...
<span class = "badge badge-success r-30"><i class = "icon-check mr-2"></i>@item.ID</span>

    }

Какой язык шаблонов вы используете? Шаблоны отображаются в бэкэнде (на сервере) или в браузере?

— 15.07.2019 21:03

Я предлагаю вам узнать о DOM и функциях JavaScript, которые позволяют вам манипулировать им.

— 15.07.2019 21:03

@PatrickHund Только в браузере. Я использую MVC с HML и JS.

— 15.07.2019 21:08

Вы уверены? @foreach и @item выглядят как .net/ASP/Razor

— 15.07.2019 21:12

var json = JSON.parse(данные); json[0].ИмяФайла json[1].ИмяФайла

— 15.07.2019 21:22

javascript json

15.07.2019 20:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы уже предоставили псевдокод,

function callLink(imageId) {
    // as you are using `.getJSON` it's already formatted and you don't need `JSON.parse()`
    $.getJSON('/GetData/GetImage?idImage=' + imageId, function (data) {
        let output = '';
        for(let i = 0; i < data.length; i++) {
            output += `<h6 class = "mb-3">${data[i].fileName}</h6>`;
            output + = `..`;
            output + = `<span class = "badge badge-success r-30"><i class = "icon-check mr-2"></i>${data[i].ID}</span>`
        }
        // or some more useful code, like $(selector).html(output);
        alert(output);
    });
}

15.07.2019 21:10

Создайте какой-нибудь html div

<div id = "images-info"></div>

Добавить запрошенные данные в div

function callLink(imageId) {
    $.getJSON('/GetData/GetImage?idImage=' + imageId, function (data) {
        for (var i = 0; i < data.length; i++) {
            $('#images-info').append('<div><h6 class = "mb-3">'+ data[i].FileName +'</h6><span class = "badge badge-success r-30"><i class = "icon-check mr-2"></i>'+ data[i].ID +'</span></div>');
        }
    });
}

Изменения DOM стоят дорого. Лучше объединить в памяти, а затем добавить окончательный результат в DOM.

— 15.07.2019 21:37

15.07.2019 21:24