Блог

Главная - Вопросы по программированию - Может видеть данные JSON в консоли, не может отобразить в браузере

Может видеть данные JSON в консоли, не может отобразить в браузере

#javascript #jquery #json #function #console

#javascript #jquery #json #функция #консоль

Вопрос:

Я извлекаю данные JSON из локального файла. Если данные есть true , то я хочу добавить их в div, если нет, то они вообще не должны отображаться.

Я могу видеть true данные в console.log , так что теперь остается добавить их, но я столкнулся с проблемой с моим return оператором (см. Код ниже). Есть мысли?

Фрагмент JS:

 import testjson from './test.json';

    function loadTopCourses() {
        let isTop = testjson.d.results.filter(x => x.TopTrainingCourse === true) {
            return {
                "Title": val.Title
            }
        };

        console.log(isTop)

        let showTopTitles = isTop;

        for (var i = 0; i < showTopTitles.length; i  ) {
            let li = $("<li></li>");
            $(li).append(showTopTitles[i].Title);
            $(".top-training-ul").append(li)
        };

    } // ------------------ loadTopCourses

    loadTopCourses();

Фрагмент JSON:

 {
   "d": {
     "results": [
       {
         ...
         "Id": 1,
         "Title": "Training 1",
         "Category": "Enter Choice #1",
         "Topic": "Enter Choice #1",
         "Description": "My Test description",
         "TopTrainingCourse": false, // ------------ //
         "ID": 1,
         "Modified": "2019-03-05T20:13:46Z",
         "Created": "2019-03-05T20:13:36Z"
       },
...
...
"FileSystemObjectType": 0,
         "Id": 2,
         "Title": "Training 2",
         "Category": "Enter Choice #2",
         "Topic": "Enter Choice #1",
         "Description": null,
         "TopTrainingCourse": true, // ------------- //
         "ID": 2,
         "Modified": "2019-03-05T20:14:00Z",
         "Created": "2019-03-05T20:13:53Z"
       },
...
...

console.log:

 (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}] // ------ correct # of true values
0: {__metadata: {…}, FirstUniqueAncestorSecurableObject: {…}, RoleAssignments: {…}, AttachmentFiles: {…}, ContentType: {…}, …}
1:
ID: 4
Id: 4
Modified: "2019-03-05T22:33:04Z"
OData__UIVersionString: "1.0"
ParentList: {__deferred: {…}}
RoleAssignments: {__deferred: {…}}
Title: "Training 4"
TopTrainingCourse: true // ------------- //
Topic: "Enter Choice #1"

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

1. let li = $("<li></li>"); $(li).append(showTopTitles[i].Title); вам не кажется, что ваш li файл закрыт до того, как вы добавите к нему данные. Вы должны закрыть свой </li> после добавления к нему данных .. только тогда это будет похоже на это <li>test data</li>

2. пусть li = $(«<li></li>»); Эта строка кажется неправильной, в jquery вы должны поместить селектор $ («li»). Но в вашем случае попробуйте что-то более похожее в вашем цикле for; пусть li = «<li>» showTopTitles[i]. Заголовок «</li>»; а затем добавляем его с помощью $(«.top-training-ul»).append(li)

3. @nircraft @Nico Мой код сработал для меня, но да, он выглядел довольно неуклюжим. Я обновил его, так что append теперь он находится на одной строке.

Ответ №1:

Вы можете map преобразовать отфильтрованные результаты в новый массив нужной вам формы:

 let isTop = testjson.d.results.filter(x => x.TopTrainingCourse === true)
.map(x => { return { Title: x.Title } });