Separate and print Object items in HTML

Asked

Viewed 62 times

-1

I have this script:

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

        var txt = this.responseText;
        var obj = JSON.parse(txt);
        document.getElementById("demo").innerHTML = obj.value + ", " + obj.uri + " ... <br>";
    }
  };

  xhttp.open("GET", "link?order=desc&cli=9999999999", true);
 
  xhttp.send();

that returns me the content below.

{
  "items": [{
    "Value": 2149.44,
    "boleto": {
      "uri": "link.pdf",
      "digits": "0000000000000000000000000000000000000",
      "bank": "Boston Bank"
    },
    "doc": "999999-RNF",
    "dueDate": "2018-10-11",
    "cnpjCLI": "999999999999",
    "cnpjREP": "999999999999"
  }, {
    "Value": 2149.44,
    "boleto": {
      "uri": "link.pdf",
      "digits": "0000000000000000000000000000000000000",
      "bank": "Boston Bank"
    },
    "doc": "999999-RNF",
    "dueDate": "2018-10-11",
    "cnpjCLI": "999999999999",
    "cnpjREP": "999999999999"
  } {
    "Value": 2149.44,
    "boleto": {
      "uri": "link.pdf",
      "digits": "0000000000000000000000000000000000000",
      "bank": "Boston Bank"
    },
    "doc": "999999-RNF",
    "dueDate": "2018-10-11",
    "cnpjCLI": "999999999999",
    "cnpjREP": "999999999999"
  } {
    "Value": 2149.44,
    "boleto": {
      "uri": "link.pdf",
      "digits": "0000000000000000000000000000000000000",
      "bank": "Boston Bank"
    },
    "doc": "999999-RNF",
    "dueDate": "2018-10-11",
    "cnpjCLI": "999999999999",
    "cnpjREP": "999999999999"
  } {
    "Value": 2149.44,
    "boleto": {
      "uri": "link.pdf",
      "digits": "0000000000000000000000000000000000000",
      "bank": "Boston Bank"
    },
    "doc": "999999-RNF",
    "dueDate": "2018-10-11",
    "cnpjCLI": "999999999999",
    "cnpjREP": "999999999999"
  } {
    "Value": 2149.44,
    "boleto": {
      "uri": "link.pdf",
      "digits": "0000000000000000000000000000000000000",
      "bank": "Boston Bank"
    },
    "doc": "999999-RNF",
    "dueDate": "2018-10-11",
    "cnpjCLI": "999999999999",
    "cnpjREP": "999999999999"
  }]
}

I need to print the items separately in HTML. To separate, I’m trying something like the code below, but when I print with <div id='demo'></div>, the answer is undefined, undefined.

   var txt = this.responseText;
   var obj = JSON.parse(txt);
   document.getElementById("demo").innerHTML = obj.value + ", " + obj.uri +" ... <br>";
javascript xmlhttprequest jsonobject
  • 2

    You saw that your JSON has an attribute items what is an array? Tried to use obj.items[0].Value? value is different from Value. Something else, uri is inside boleto...

2 answers

2

Hello...

It seems that the error is here:

ocument.getElementById("demo").innerHTML = obj.value + ", " + obj.uri" ... <br>"

Note that you parsed the obj that has a property 'items'.

The right thing would be:

document.getElementById("demo").innerHTML = obj.items[0].value + ", " + obj.items[0].boleto.uri" ... <br>"

2


Hello!

The answer to your request is an object with the attribute items, this being an array. For you to print all the items, you would need to iterate on it, going through each item in the list and printing them on the screen.

response.items.forEach(item => {
      const p = document.createElement('p');
      const texto = document.createTextNode(`${item.value}, ${item.boleto.uri}...`);
      p.append(texto);
      document.getElementById("demo").append(p);
})

Below an example:

const response = {
  "items": [{
      "value": 2149.44,
      "boleto": {
        "uri": "link.pdf",
        "digits": "0000000000000000000000000000000000000",
        "bank": "Boston Bank"
      },
      "doc": "999999-RNF",
      "dueDate": "2018-10-11",
      "cnpjCLI": "999999999999",
      "cnpjREP": "999999999999"
    },
    {
      "value": 2149.44,
      "boleto": {
        "uri": "link.pdf",
        "digits": "0000000000000000000000000000000000000",
        "bank": "Boston Bank"
      },
      "doc": "999999-RNF",
      "dueDate": "2018-10-11",
      "cnpjCLI": "999999999999",
      "cnpjREP": "999999999999"
    },
    {
      "value": 2149.44,
      "boleto": {
        "uri": "link.pdf",
        "digits": "0000000000000000000000000000000000000",
        "bank": "Boston Bank"
      },
      "doc": "999999-RNF",
      "dueDate": "2018-10-11",
      "cnpjCLI": "999999999999",
      "cnpjREP": "999999999999"
    },
    {
      "value": 2149.44,
      "boleto": {
        "uri": "link.pdf",
        "digits": "0000000000000000000000000000000000000",
        "bank": "Boston Bank"
      },
      "doc": "999999-RNF",
      "dueDate": "2018-10-11",
      "cnpjCLI": "999999999999",
      "cnpjREP": "999999999999"
    },
    {
      "value": 2149.44,
      "boleto": {
        "uri": "link.pdf",
        "digits": "0000000000000000000000000000000000000",
        "bank": "Boston Bank"
      },
      "doc": "999999-RNF",
      "dueDate": "2018-10-11",
      "cnpjCLI": "999999999999",
      "cnpjREP": "999999999999"
    },
    {
      "value": 2149.44,
      "boleto": {
        "uri": "link.pdf",
        "digits": "0000000000000000000000000000000000000",
        "bank": "Boston Bank"
      },
      "doc": "999999-RNF",
      "dueDate": "2018-10-11",
      "cnpjCLI": "999999999999",
      "cnpjREP": "999999999999"
    }
  ]
};

response.items.forEach(item => {
  const p = document.createElement('p');
  const texto = document.createTextNode(`${item.value}, ${item.boleto.uri}...`);
  p.append(texto);
  document.getElementById("demo").append(p);
})
<div id="demo"></div>

Browser other questions tagged javascript xmlhttprequest jsonobject

You are not signed in. Login or sign up in order to post.