Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. JavaScript
  4. JSON object not showing values.. Can someone help

JSON object not showing values.. Can someone help

Scheduled Pinned Locked Moved JavaScript
htmldockerjsonhelpquestion
2 Posts 2 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • U Offline
    U Offline
    User 3561333
    wrote on last edited by
    #1

    Code is here:-

    {% csrf_token %}

    //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>
    `;
    }

    JSON object is here:-

    {"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": "

    L 1 Reply Last reply
    0
    • U User 3561333

      Code is here:-

      {% csrf_token %}

      //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>
      `;
      }

      JSON object is here:-

      {"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": "

      L Offline
      L Offline
      Lost User
      wrote on last edited by
      #2

      I took another look at this and your JSON text has some badly formatted data round about character 278.

      1 Reply Last reply
      0
      Reply
      • Reply as topic
      Log in to reply
      • Oldest to Newest
      • Newest to Oldest
      • Most Votes


      • Login

      • Don't have an account? Register

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • World
      • Users
      • Groups