Member 3564076 Ответов: 1

Объект JSON не показывает значения, может кто-нибудь помочь..


Проблема в том , что при попытке синтаксического анализа он работает нормально, но получение значения формы его ..ничего не показывает.


Код здесь:-

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
  
{% csrf_token %}
    
<script>  

//Your string
    
let a = "{{models}}"    
a = a.replace(/"/g, '"');
a = a.replace(/(?:\r\n|\r|\n)/g, '');

let stringToParse = JSON.stringify(a);      
//document.body.innerHTML = `<p> Received String: ${stringToParse}</p>`;

//Converting your string to object
let convertedToObject = JSON.parse(stringToParse);
document.body.innerHTML = `<p> Received String: ${convertedToObject}</p>`;

//Getting the boardMembers list from your parsed object
let listBoardMembers = convertedToObject.boardMembers;
let listExecutives  =  convertedToObjects.executives;    

document.body.innerHTML = `<p> listboard: ${listBoardMembers}</p>`;
document.body.innerHTML = `<p>  listexecutives: ${listExecutives}</p>`;
   
    
//Creating Elements on HTML (creating a Paragraph with the received data and a container for the list of members). *Notice: I've created a "DIV" (container) with a unique ID ("listMembers"). This is important because when I start to iterate the members I will add them inside the container, and for that, I need to reference it using an ID.*

//document.body.innerHTML = `<p> Received String: ${convertedToObject}</p>`;
document.body.innerHTML += `<div id="listMembers"></div>`;

//Iterating the list of boardMembers using this length;
for (let i = 0; i < listBoardMembers.length; i++) {
  let member = listOfMembers[i];

  let memberName = member.name;
  let memberImageURL = '';

  // Verify if the user has thumbnail
  if (member.thumbnail !== null){
     memberImageURL = member.thumbnail.url;
  }

  //Adding this member to the member's container, using the container ID, that we created previously.

  document.getElementById('listMembers').innerHTML += `
     <div style="display: flex;">
       <img src="${memberImageURL}">
       <h1>${memberName}</h1>
     </div>
  `;
}
      
  </script>
</body>
</html>


Что я уже пробовал:

Попытался вывести значения после синтаксического анализа...

ДЖСОН здесь..:-

{"boardMembers": [{"id": "7394026", "name": "Stephen Joseph Squeri", "slug": "7394026-stephen-joseph-squeri", "companyName": "American Express Co", "company": {"id": "AXP:US", "name": "American Express Co"}, "webVisibility": true}, {"id": "3994082", "name": "Ronald A Williams "Ron"", "slug": "3994082-ronald-a-williams-"ron"", "companyName": null, "company": null, "webVisibility": false}, {"id": "1439479", "name": "Theodore J. Leonsis", "slug": "1439479-theodore-j-leonsis", "companyName": "Monumental Sports & Entertainment", "company": null, "webVisibility": true}, {"id": "1499616", "name": "John Joseph Brennan "Jack"", "slug": "1499616-john-joseph-brennan", "companyName": "Vanguard Charitable Endowment", "company": null, "webVisibility": true}, {"id": "1501790", "name": "Dr Daniel L Vasella "Dan"", "slug": "1501790-dr-daniel-l-vasella-"dan"", "companyName": null, "company": null, "webVisibility": false}, {"id": "1512919", "name": "Anne Lauvergeon", "slug": "1512919-anne-lauvergeon", "companyName": null, "company": null, "webVisibility": false}, {"id": "1529307", "name": "Peter F Chernin", "slug": "1529307-peter-f-chernin", "companyName": "Chernin Group LLC/ The", "company": null, "webVisibility": true}, {"id": "1720518", "name": "Rafael De La Vega "Ralph"", "slug": "1720518-rafael-de-la-vega", "companyName": "Forte Capital Management LLC", "company": {"id": "0778486D:US", "name": "Forte Capital Management LLC/GA"}, "webVisibility": true}, {"id": "1805754", "name": "Michael O Leavitt "Mike"", "slug": "1805754-michael-o-leavitt", "companyName": "Leavitt Partners", "company": {"id": "0707795D:US", "name": "Leavitt Partners LLC"}, "webVisibility": true}, {"id": "1879736", "name": "Christopher D Young "Chris"", "slug": "1879736-christopher-d-young", "companyName": "Mcafee Inc", "company": null, "webVisibility": true}, {"id": "14003646", "name": "Charlene Barshefsky", "slug": "14003646-charlene-barshefsky", "companyName": "Wilmer Cutler Pickering Hale and Dorr LLP", "company": {"id": "1221L:US", "name": "Wilmer Cutler Pickering Hale and Dorr LLP"}, "webVisibility": true}, {"id": "17579429", "name": "Karen L Parkhill", "slug": "17579429-karen-l-parkhill", "companyName": "Medtronic PLC", "company": {"id": "MDT:US", "name": "Medtronic PLC"}, "webVisibility": true}, {"id": "21421355", "name": "Lynn A Pike", "slug": "21421355-lynn-a-pike", "companyName": null, "company": null, "webVisibility": false}], "totalBoardMembers": 13, "executives": [{"id": "7394026", "name": "Stephen Joseph Squeri", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNnVt_wW9y_A/v3/80x80.jpg", "alt": null}, "title": "Chairman/CEO", "slug": "7394026-stephen-joseph-squeri", "webVisibility": true}, {"id": "20887787", "name": "Dr Mohammed Badi", "thumbnail": null, "title": "Chief Strategy Officer", "slug": "20887787-mohammed-badi", "webVisibility": true}, {"id": "18706279", "name": "Monique R Herena", "thumbnail": null, "title": "Chief Colleague Experience Officer", "slug": "18706279-monique-r-herena", "webVisibility": true}, {"id": "19676689", "name": "Elizabeth Rutledge", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iABmk_sWUnY4/v3/80x80.png", "alt": null}, "title": "Chief Marketing Officer", "slug": "19676689-elizabeth-rutledge", "webVisibility": true}, {"id": "18784925", "name": "Tangela Richter", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iKYkW0FlMRW4/v3/80x80.png", "alt": null}, "title": "Chief Governance Ofcr/Secy", "slug": "18784925-tangela-richter", "webVisibility": true}, {"id": "15024090", "name": "Laureen E Seeger", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iiw0z.pdTRbE/v1/80x80.jpg", "alt": "LAUREEN E SEEGER"}, "title": "Chief Legal Officer", "slug": "15024090-laureen-e-seeger", "webVisibility": true}, {"id": "21336581", "name": "Jennifer Skyler", "thumbnail": null, "title": "Chief Corporate Affairs Officer", "slug": "21336581-jennifer-skyler", "webVisibility": true}, {"id": "19676686", "name": "Raymond Joabar", "thumbnail": null, "title": "Pres:Global Risk/CRO", "slug": "19676686-raymond-joabar", "webVisibility": true}, {"id": "15365626", "name": "Douglas E Buckminster", "thumbnail": null, "title": "Group Pres:Global Consumer", "slug": "15365626-douglas-e-buckminster", "webVisibility": true}, {"id": "16654781", "name": "Anna Marrs", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNFzMiuYiRGY/v3/80x80.png", "alt": null}, "title": "Pres:Global Commercial Svcs", "slug": "16654781-anna-marrs", "webVisibility": true}, {"id": "16804630", "name": "Denise Pickett", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iReOY_ZB0dOI/v2/80x80.png", "alt": null}, "title": "Pres:Global Services Group", "slug": "16804630-denise-pickett", "webVisibility": true}, {"id": "6832356", "name": "Anre D Williams", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iJ5kSc7LL.3Y/v2/80x80.png", "alt": null}, "title": "Pres:Global Merchant & Network Svcs", "slug": "6832356-anre-d-williams", "webVisibility": true}, {"id": "3221610", "name": "Jeffrey C Campbell "Jeff"", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iV0fAS1rb10o/v1/80x80.jpg", "alt": "35000014"}, "title": "Exec VP/CFO", "slug": "3221610-jeffrey-c-campbell", "webVisibility": true}, {"id": "16733751", "name": "Marc D Gordon", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/isa0AVbtpBaM/v3/80x80.jpg", "alt": null}, "title": "Exec VP/CIO", "slug": "16733751-marc-d-gordon", "webVisibility": true}, {"id": "21531045", "name": "Jessica Lieberman Quinn", "thumbnail": null, "title": "Exec VP/Controller", "slug": "21531045-jessica-lieberman-quinn", "webVisibility": true}, {"id": "19863566", "name": "Alan P Gallo", "thumbnail": {"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/i_G02QWHFys4/v3/80x80.jpg", "alt": null}, "title": "Exec VP:Internal Audit/Chief Audit Exec", "slug": "19863566-alan-p-gallo", "webVisibility": true}, {"id": "16310906", "name": "Vivian Zhou", "thumbnail": null, "title": "Senior VP/Head:Investor Relations", "slug": "16310906-vivian-zhou", "webVisibility": false}], "totalExecutives": 17}

Richard MacCutchan

Используйте инструменты разработчика, чтобы проверить, что исходное поле получает весь текст JSON.

Member 3564076

Прием хороший...

А вот и JSON.

{
"члены правления": [
{
"id": "18706279",
"имя": "Моник Р Херена",
"миниатюра": null,
"название": "главный сотрудник по опыту коллег",
"slug": "18706279-monique-r-herena",
"webVisibility": правда
},
{
"id": "19676689",
"имя": "Элизабет Ратледж",
"эскиз": {
"адрес": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iABmk_sWUnY4/v3/80x80.png",
"alt": null
},
"название": "директор по маркетингу",
"слизняк": "19676689-Элизабет-Ратледж",
"webVisibility": правда
},
{
"id": "18784925",
"имя": "Тангела Рихтер",
"эскиз": {
"адрес": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iKYkW0FlMRW4/v3/80x80.png",
"alt": null
},
"название": "Главное управление Ofcr/Secy",
"слизняк": "18784925-тангела-Рихтер",
"webVisibility": правда
},
{
"id": "15024090",
"имя": "Lauren E Seeger",
"эскиз": {
"адрес": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iiw0z.pdTRbE/v1/80x80.jpg",
"альт": "Лорен Э Сигер"
},
"название": "главный юрисконсульт",
"slug": "15024090-Lauren-e-seeger",
"webVisibility": правда
},
{
"id": "21336581",
"имя": "Дженнифер Скайлер",
"миниатюра": null,
"название": "Главный специалист по корпоративным вопросам",
"слизняк": "21336581-Дженнифер-Скайлер",
"webVisibility": правда
},
{
"id": "19676686",
"имя": "Раймонд Иоабар",
"миниатюра": null,
"название": "Pres:Global Risk/CRO",
"слизняк": "19676686-Раймонд-иоабар",
"webVisibility": правда
},
{
"id": "15365626",
"имя": "Дуглас Э Бакминстер",
"миниатюра": null,
"название": "Группа пре:глобальный потребительский",
"slug": "15365626-douglas-e-buckminster",
"webVisibility": правда
},
{
"id": "16654781",
"имя": "Анна Маррс",
"эскиз": {
"адрес": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNFzMiuYiRGY/v3/80x80.png",
"alt": null
},
"название": "Pres:Global Commercial Svcs",
"слизняк": "16654781-Анна-Маррс",
"webVisibility": правда
},
{
"id": "16804630",
"имя": "Дениз Пикетт",
"эскиз": {
"адрес": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iReOY_ZB0dOI/v2/80x80.png",
"alt": null
},
"название": "Pres:Global Services Group",
"слизняк": "16804630-Дениз-Пикетт",
"webVisibility": правда
},
{
"id": "6832356",
"имя": "Anre D Williams",
"эскиз": {
"адрес": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iJ5kSc7LL.3Y/v2/80x80.png",
"alt": null
},
"название": "Pres:Global Merchant & Network Svcs",
"slug": "6832356-anre-d-williams",
"webVisibility": правда
},
{
"id": "3221610",
"имя": "Джеффри Си Кэмпбелл \"Джефф\"",
"эскиз": {
"URL-адрес": " ",
"alt": "35000014"
},
"название": "исполнительный вице-президент/финансовый директор",
"слизняк": "3221610-Джеффри-Си-Кэмпбелл",
"webVisibility": правда
},
{
"id": "16733751",
"имя": "Марк Д. Гордон",
"эскиз": {
"URL-адрес": " ",
"alt": null
},
"название": "Exec VP/CIO",
"слизняк": "16733751-Марк-Д-Гордон",
"webVisibility": правда
},
{
"id": "21531045",
"имя": "Джессика Либерман Куинн",
"миниатюра": null,
"название": "Exec VP/Controller",
"слизняк": "21531045-Джессика-Либерман-Куинн",
"webVisibility": правда
},
{
"id": "19863566",
"имя": "Алан П Галло",
"эскиз": {
"URL-адрес": " ",
"alt": null
},
"название": "исполнительная ВП:внутренний аудит/аудит главный exec будет",
"слизняк": "19863566-Алан-п-Галло",
"webVisibility": правда
},
{
"id": "16310906",
"имя": "Вивиан Чжоу",
"миниатюра": null,
"название": "старший вице-президент/руководитель отдела по связям с инвесторами",
"слизняк": "16310906-Вивиан-Чжоу",
"webVisibility": ложные
}
],
"totalExecutives": 17
}

Richard MacCutchan

Очень интересно, но что вы получаете внутри своих переменных, когда запускаете код? Кроме того, глядя на ваш код, переменная a это уже строка так зачем же ты звонишь stringify на нем?

Member 3564076

Получаю это...


Received String: "{\"boardMembers\": [{\"id\": \"7394026\", \"name\": \"Stephen Joseph Squeri\", \"slug\": \"7394026-stephen-joseph-squeri\", \"companyName\": \"American Express Co\", \"company\": {\"id\": \"AXP:US\", \"name\": \"American Express Co\"}, \"webVisibility\": true}, {\"id\": \"3994082\", \"name\": \"Ronald A Williams \"Ron\"\", \"slug\": \"3994082-ronald-a-williams-\"ron\"\", \"companyName\": null, \"company\": null, \"webVisibility\": false}, {\"id\": \"1439479\", \"name\": \"Theodore J. Leonsis\", \"slug\": \"1439479-theodore-j-leonsis\", \"companyName\": \"Monumental Sports & Entertainment\", \"company\": null, \"webVisibility\": true}, {\"id\": \"1499616\", \"name\": \"John Joseph Brennan \"Jack\"\", \"slug\": \"1499616-john-joseph-brennan\", \"companyName\": \"Vanguard Charitable Endowment\", \"company\": null, \"webVisibility\": true}, {\"id\": \"1501790\", \"name\": \"Dr Daniel L Vasella \"Dan\"\", \"slug\": \"1501790-dr-daniel-l-vasella-\"dan\"\", \"companyName\": null, \"company\": null, \"webVisibility\": false}, {\"id\": \"1512919\", \"name\": \"Anne Lauvergeon\", \"slug\": \"1512919-anne-lauvergeon\", \"companyName\": null, \"company\": null, \"webVisibility\": false}, {\"id\": \"1529307\", \"name\": \"Peter F Chernin\", \"slug\": \"1529307-peter-f-chernin\", \"companyName\": \"Chernin Group LLC/ The\", \"company\": null, \"webVisibility\": true}, {\"id\": \"1720518\", \"name\": \"Rafael De La Vega \"Ralph\"\", \"slug\": \"1720518-rafael-de-la-vega\", \"companyName\": \"Forte Capital Management LLC\", \"company\": {\"id\": \"0778486D:US\", \"name\": \"Forte Capital Management LLC/GA\"}, \"webVisibility\": true}, {\"id\": \"1805754\", \"name\": \"Michael O Leavitt \"Mike\"\", \"slug\": \"1805754-michael-o-leavitt\", \"companyName\": \"Leavitt Partners\", \"company\": {\"id\": \"0707795D:US\", \"name\": \"Leavitt Partners LLC\"}, \"webVisibility\": true}, {\"id\": \"1879736\", \"name\": \"Christopher D Young \"Chris\"\", \"slug\": \"1879736-christopher-d-young\", \"companyName\": \"Mcafee Inc\", \"company\": null, \"webVisibility\": true}, {\"id\": \"14003646\", \"name\": \"Charlene Barshefsky\", \"slug\": \"14003646-charlene-barshefsky\", \"companyName\": \"Wilmer Cutler Pickering Hale and Dorr LLP\", \"company\": {\"id\": \"1221L:US\", \"name\": \"Wilmer Cutler Pickering Hale and Dorr LLP\"}, \"webVisibility\": true}, {\"id\": \"17579429\", \"name\": \"Karen L Parkhill\", \"slug\": \"17579429-karen-l-parkhill\", \"companyName\": \"Medtronic PLC\", \"company\": {\"id\": \"MDT:US\", \"name\": \"Medtronic PLC\"}, \"webVisibility\": true}, {\"id\": \"21421355\", \"name\": \"Lynn A Pike\", \"slug\": \"21421355-lynn-a-pike\", \"companyName\": null, \"company\": null, \"webVisibility\": false}], \"totalBoardMembers\": 13, \"executives\": [{\"id\": \"7394026\", \"name\": \"Stephen Joseph Squeri\", \"thumbnail\": {\"url\": \"https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNnVt_wW9y_A/v3/80x80.jpg\", \"alt\": null}, \"title\": \"Chairman/CEO\", \"slug\": \"7394026-stephen-joseph-squeri\", \"webVisibility\": true}, {\"id\": \"20887787\", \"name\": \"Dr Mohammed Badi\", \"thumbnail\": null, \"title\": \"Chief Strategy Officer\", \"slug\": \"20887787-mohammed-badi\", \"webVisibility\": true}, {\"id\": \"18706279\", \"name\": \"Monique R Herena\", \"thumbnail\": null, \"title\": \"Chief Colleague Experience Officer\", \"slug\": \"18706279-monique-r-herena\", \"webVisibility\": true}, {\"id\": \"19676689\", \"name\": \"Elizabeth Rutledge\", \"thumbnail\": {\"url\": \"https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iABmk_sWUnY4/v3/80x80.png\", \"alt\": null}, \"title\": \"Chief Marketing Officer\", \"slug\": \"19676689-elizabeth-rutledge\", \"webVisibility\": true}, {\"id\": \"18784925\", \"name\": \"Tangela Richter\", \"thumbnail\": {\"url\": \"https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iKYkW0FlMRW4/v3/80x80.png\", \"alt\": null}, \"title\": \"Chief Governance Ofcr/Secy\", \"slug\": \"18784

Member 3564076

После удаления stringify на a, это будет пусто. Теперь, не используя stringify, непосредственно позвольте convertedToObject = JSON.parse(a);
но здесь ,

document.body.innerHTML = ` полученная строка: ${convertedToObject}`;

быть пустой.

1 Ответов

Рейтинг:
1

Richard MacCutchan

Данные, с которыми вы работаете, представляют собой строку в формате JSON, поэтому вам нужно преобразовать ее в массив объектов JSON, прежде чем вы сможете сделать с ней что-либо полезное. Видеть В формате JSON.разобрать()[^].


Member 3564076

Что я должен изменить в этом коде?..

Поскольку я не являюсь разработчиком front end,










{% csrf_token %}



//Ваша строка

пусть a = "{{модели}}"
а = а.заменить(/"/г, '"');
a = a.заменить(/(?:\r\n|\r|\n)/g, ");

//Преобразование строки в объект
пусть convertedToObject = JSON.parse(a);
документ.тела.innerHTML будет = `&ЛТ;п&ГТ; полученную строку: ${convertedToObject}&ЛТ;/п&ГТ;`;

//Получение списка членов совета директоров из вашего анализируемого объекта
пусть listBoardMembers = convertedToObject.boardMembers;
пусть listExecutives = convertedToObjects.executives;

документ.тела.innerHTML будет = `&ЛТ;п&ГТ; listboard: ${listBoardMembers}&ЛТ;/п&ГТ;`;
документ.тела.innerHTML будет = `&ЛТ;п&ГТ; listexecutives: ${listExecutives}&ЛТ;/п&ГТ;`;


//Создание элементов на HTML (создание абзаца с полученными данными и контейнера для списка членов). *Обратите внимание: я создал "DIV" (контейнер) с уникальным идентификатором ("listMembers"). Это важно, потому что, когда я начну повторять элементы, я добавлю их внутри контейнера, и для этого мне нужно ссылаться на него с помощью идентификатора.*

//документ.тела.innerHTML будет = `&ЛТ;п&ГТ; полученную строку: ${convertedToObject}&ЛТ;/п&ГТ;`;
документ.тела.innerHTML будет += `&ЛТ;див ИД="listMembers"&ГТ;&ЛТ;/дел&ГТ;`;

//Итерация списка членов правления с использованием этой длины;
for (let i = 0; i < listBoardMembers.length; i++) {
пусть member = listOfMembers[i];

пусть memberName = member.name;
пусть memberImageURL = ";

// Проверьте, есть ли у пользователя миниатюра
если (сотрудник.эскиз !== нуль){
memberImageURL = член.эскиз.URL-адрес;
}

//Добавление этого элемента в контейнер элемента, используя идентификатор контейнера, который мы создали ранее.

document.getElementById('listMembers').innerHTML += `
<div style="display: flex;">
<img src="${memberImageURL}">
<h1>${memberName}</h1>
</div>
`;
}









Так как от этой строки не отходят из-за пустого значения..

пусть convertedToObject = JSON.parse(a);
document.body.innerHTML = ` полученная строка: ${convertedToObject}`;

Richard MacCutchan

Сделайте то, что я предложил выше. Передайте исходную полученную строку в JSON.parse действуйте и исходите оттуда.

Member 3564076

let convertedToObject = JSON.parse(a);




Передал строку a в JSON.parse, но здесь
convertedToObject
нет ничего.

пробовал печатать по
document.body.innerHTML = ` Received String: ${convertedToObject}`;


пустой.

Richard MacCutchan

Пожалуйста, перейдите по ссылке, которую я дал вам выше, и изучите Javascript-обработку JSON.

Member 3564076

Спасибо, за ваше решение, у меня было бы столько времени, чтобы учиться, а потом не публиковаться здесь.

Richard MacCutchan

Ну, это зависит от вас, Хотите ли вы научиться делать вещи правильно или нет.

Member 3564076

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

Richard MacCutchan

Удачи.