Question

我有一个聊天的JSON转储文件。我需要将其提取出来并打印到网站中。我是初学者，所以请帮助我。

我有我的工作区的JSON转储文件。我想从中提取一些关键细节。我想要在user_profile对象内的real_name，在JSON数组内。如何提取它。另外，我该如何提取所有real_name值（我的意思是有嵌套的对象）。请帮助我。

[
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "hey there",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "welcome",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "Help me",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    }
]

请帮助我如何使用JAVASCRIPT和ajax将这些值也导入HTML？

Answer 1

只需遍历JSON这样的内容即可。（注意空值）

var obj = [
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "hey there",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "welcome",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "Help me",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    }
];


for (var i in obj)
{
     var type = obj[i].type;
     var source_team = obj[i].source_team;

     var user_profile = obj[i].user_profile;

     var real_name = user_profile.real_name;


    alert(source_team+" : "+real_name);

}

Answer 2

如果我理解正确，那么您想提取真实姓名列表。如您所说，您正在使用JavaScript。将数组分配给变量，让我们说arr;

    var arr = [
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "hey there",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },......,
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "Help me",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    }];

var list_real_name = arr.map((userObj)=>{
  return userObj['user_profile']['real_name'];
})

Answer 3

如果您在本地（本地）文件或远程文件中拥有json，

以下脚本将起作用

     <script>
            function fetchJSONFile(path, callback) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === 4) {
                if (httpRequest.status === 200) {
                    var data = JSON.parse(httpRequest.responseText);
                    if (callback) callback(data);
                }
            }
        };
        httpRequest.open('GET', path);
        httpRequest.send(); 
    }

    // this requests the file and executes a callback with the parsed result once
    //   it is available. You can give URL just in case you are provided with URL.

fetchJSONFile('test.json', function(data){
        // do something with your data
        console.log(data[0].user_profile.real_name);
    });
        </script>

使用Ajax

<script>
    $(document).ready(function(){
        $.ajax({
    url: 'test.json',
    type: "GET",
    dataType: 'json',
    success: function (data) {
        $.each(data,function(i,data)
        {
          console.log(data.user_profile.real_name);//This will loop 
      //through the result
        });
        console.log(data[0].user_profile.real_name); //Show only first //result
        }

     });
     });

</script>

别忘了在Ajax代码之前添加Jquery

Answer 4

var obj = [{
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "hey there",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  },
  {
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "welcome",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  },
  {
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "Help me",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  }
];


for (var i = 0; i < obj.length; i++) {
  console.log("Real name" + i + ": " + obj[i].user_profile.real_name);
}

如何在JSON数组中的对象中获取JSON对象

4 个答案: