looping through javascript nested objects in html displays [object object]?

I am trying to loop through a Javascript object to display the contents on the html page. The contents is from an API that has ben parsed into javascript Object. The loop works fine but every solution i come up with either gives me nothing in the html or display [object object][object object]

I have no idea why it keeps displaying this or how to get it displaying correctly.

The data held being got from the api call

[{"id":"68343","order_id":"77348","customer_id":"2","number":"1"}, 
  {"id":"68344","order_id":"77348","customer_id":"2","number":"1"},
   {"id":"68342","order_id":"77348","customer_id":"3","number":"1"}]

I get the data and parse

function(data){
var result = JSON.parse(data);
if(result.status == "success")
{
//need to loop through all data so that it displays in a html div



}


}

So i have tried the for loop:-

for (var objProp in result){

    for (var obj in result[objProp]){

document.getElementById("orderItem").innerHTML = result[objProp]   
[obj];
 }
}

displays [object object]

another for loop

for (var key in result){
     document.getElementById("orderItem").innerHTML =result[key];}

getting a single item back is ok

document.getElementById("orderItem").innerHTML = result.data[0].id;