您可以尝试类似的FIDDLE
但是，我将myObject改为json对象数组，如下所示：

var jsonObj = {"myObject":
 [
    {
     title: 'JAVA',
     id: "JAVAsubj",
     path: "json/data.json"
    },
    { 
    title: "C#",
    id: "JAVAsubj",
    path: "json/data1.json"
    },
    {
    title: "C++",
    id: "JAVAsubj",
    path: "json/data2.json"
    }
  ]
}

var count = Object.keys(jsonObj.myObject).length;
var container= document.getElementById('buttons'); // reference to containing elm
for(var i=0;i<count;i++){
var obj= jsonObj.myObject[i];
var button = "<input type='button' value="+obj.title+"></input>"
container.innerHTML+=button;
}

你需要做的第一件事就是将JSON转换为js对象：

var myJSON= {"myObject": {
"JAVA": {
    "id": "JAVAsubj",
    "path": "json/data.json"
},
"C#": { 
    "id": "JAVAsubj",
    "path": "json/data1.json"
},
"C++": {
   "id": "JAVAsubj",
    "path": "json/data2.json"
}
}
}

现在，像下面这样将对象的值放入字典：

var dctLanguages = myJSON["myObject"];

现在要动态呈现按钮，只需执行以下操作：
var strHTML =“”;

for (var key in dctLanguages)
{
   var language = dctLanguages[key];
   strHTML += '<input type="button" id="'+language.id+'" value="'+key+'"/>';
}

并将此HTML附加到容器div中，如下所示：

$(strHTML).appendTo("#container");

希望这对你有用。

const info = [
    {
        "id": 1,
        "img": "a.jpg",
        "name": "Avinash Mehta",
        "desc": "I am Web Developer"
       
    },
    {
        "id": 2,
        "img": "c.jpg",
        "name": "Avinash",
        "desc": "I am Web"
       
    },
    {
        "id": 3,
        "img": "b.jpg",
        "name": "Mehta",
        "desc": "I am Developer"
       
    },
    
]
const main = document.querySelector(".main");

window.addEventListener("DOMContentLoaded", function(){
    let displayInfo = info.map(function(profile){

        return` <div class="profile">
        <img src="${profile.img}" alt="">
        <h2>${profile.name}</h2>
        <p>${profile.desc}</p>
    </div>`
    });
    displayInfo = displayInfo.join("");
    main.innerHTML = displayInfo
})

这个应该能帮到你

const info = [
    {
        "id": 1,
        "img": "a.jpg",
        "name": "Avinash Mehta",
        "desc": "I am Web Developer"
       
    },
    {
        "id": 2,
        "img": "c.jpg",
        "name": "Avinash",
        "desc": "I am Web"
       
    },
    {
        "id": 3,
        "img": "b.jpg",
        "name": "Mehta",
        "desc": "I am Developer"
       
    },
    
]
const main = document.querySelector(".main");

window.addEventListener("DOMContentLoaded", function(){
    let displayInfo = info.map(function(profile){

        return` <div class="profile">
        <img src="${profile.img}" alt="">
        <h2>${profile.name}</h2>
        <p>${profile.desc}</p>
    </div>`
    });
    displayInfo = displayInfo.join("");
    main.innerHTML = displayInfo
})